Sky Sky - 1 month ago 8
Javascript Question

JQuery autocomplete doesn't work properly with js objects

I'm trying to use JQuery autocomplete but I cannot make it to work properly. Inputs get the values when I choose a product from the dropdown but search is not working. No matter what I type, the 2 options show up every time.

<input style="width:80px;" id="product_code"></input>
<input style="width:220px;" id="product_name"></input>


-

var product = [
{
"name": "chocolate",
"code": "050"
},
{
"name": "cake",
"code": "10000"
}
];

$('#product_name').autocomplete({
minLength: 2,
source: function (request, response) {
response($.map(product, function (value, key) {
return {
label: value.name,
value: value.code
}
}));

},
select: function(event, ui) {
$('#product_code').val(ui.item.value);
$('#product_name').val(ui.item.label);
return false;
}
});

Answer

The source option of jquery-ui's autocomplete can accept a function, you you need to keep in mind that:

The callback gets two arguments:

  1. A request object, with a single term property, which refers to the value currently in the text input. For example, if the user enters "new yo" in a city field, the Autocomplete term will equal "new yo".
    So basically you should access this using request.term
  2. A response callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.

The idea behind the source is that it gives you a complete control of the data to show, however this also gives you the responsibility of doing all the filtering and decide which values to display.

If you want to check if the name or code of the values inside the product array have the term you just searched for, you should use:

if (val.name.indexOf(request.term) > -1 || val.code.indexOf(request.term) > -1)

Here is an example:

var product = [
  {
    "name": "chocolate",
    "code": "050"
  },
  {
    "name": "cake",
    "code": "10000"
  }
];

$('#product_name').autocomplete({
  minLength: 2,
  source: function (request, response) {
    response($.map(product, function (val, i) {
      if (val.name.indexOf(request.term) > -1 || val.code.indexOf(request.term) > -1) {
        return {
          label: val.name,
          value: val.code
        };
      }
    }));
  },
  select: function(event, ui) {
    $('#product_code').val(ui.item.value);
    $('#product_name').val(ui.item.label);
    return false;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input style="width:80px;" id="product_code"></input>
<input style="width:220px;" id="product_name"></input>