Autocomplete JQuery shows all the results without filtering them

Question

This jQuery autocomplete code show all options, regardless of what is typed in the input field. How are the displayed options limited to items based on what it typed?

jQuery(document).ready(function($) {
  $("#inputfield").autocomplete({
    minLength: 0,
    source: function(request, response) {
      var data = $.map(resultUsers, function(value, key) {
        return {
          label: value.name + " - " + value.city,
          value: value.name
        }
      });
      response(data);
    }
  }).focus(function() {
    $(this).autocomplete("search", "");
  });
});

  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<input id="inputfield">

What is `resultUsers` supposed to be? Please provide a _proper_ [mre] of your issue, when asking this kind of question here. — CBroe, Sep 21 '22 at 11:00
Seems to work fine when provided something like `const resultUsers = [{"name": "one", "city": "hey"},{"name": "two", "city": "ya"}];`. How and where are you trying to filter that? — bloodyKnuckles, Sep 21 '22 at 11:07
@CBroe This is an example of resultUsers: var resultUsers = [{"name":"Mario","surname":"Rossi","city":"Rieti"},{"name":"Luca","surname":"Verdi","city":"Rome"}; — antoniodilorenzo, Sep 21 '22 at 13:40
@bloodyKnuckles All results present in resultUsers are shown, as if the autocomplete did not work — antoniodilorenzo, Sep 21 '22 at 13:42
_"as if the autocomplete did not work"_ - more like, as if you forgot to actually do _your_ part in this :-) https://api.jqueryui.com/autocomplete/#option-source clearly explains it: _"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**"_ - filtering the data according to the user input is _your_ responsibility, when you use a callback function as `source`. — CBroe, Sep 21 '22 at 13:54

bloodyKnuckles · Accepted Answer · 2022-09-22T16:59:32.250

Remove function(request, response) { ... } response(data); "wrapper", and
Add filter overwrite.

jQuery(document).ready(function($) {
  $("#inputfield").autocomplete({
    minLength: 0,
    source: $.map(resultUsers, function(value, key) {
      return {
        label: value.name + " - " + value.city,
        value: value.name
      }
    })
  }).focus(function() {
    $(this).autocomplete("search", "");
  });
});

const resultUsers = [
  {"name": "one", "city": "hey"}, {"name": "two", "city": "ya"}
];

// CREDIT: https://stackoverflow.com/a/19053987/2743458
$.ui.autocomplete.filter = function(array, term) {
  var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(term), "i");
  return $.grep(array, function(value) {
    return matcher.test(value.label || value.value || value);
  });
};

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<input id="inputfield">

Including the ui filter overwrite is only necessary to restrict limiting the results to items start with what is typed.

Credit for "starts with" filter: https://stackoverflow.com/a/19053987/2743458

Looking at @cbroe 's final comment on the question—when a callback is assigned to the source property the response() function displays the suggested options after filtering.

So the source callback also needs to filter the potential options, and reformat them into the label/value return object. jQuery map() function can do both:

jQuery(document).ready(function($) {
  $("#inputfield").autocomplete({
    minLength: 0,
    source: function (req, res) {
      let data = $.map(resultUsers, function(value, key) {
      
        // FILTER to include options that start with search term
        if ( 0 === value.name.indexOf(req.term) ) {
        
          // MAP to label/value object
          return { // <-- reformat
            label: value.name + " - " + value.city,
            value: value.name
          }
        } else { return null; }
      });
      res(data);
    }
  }).focus(function() {
    $(this).autocomplete("search", "");
  });
});

const resultUsers = [
  {"name": "one", "city": "hey"}, {"name": "two", "city": "ya"}
];

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<input id="inputfield">

No need to modify the $.ui.autocomplete.filter() function, as in the solution above.

Thank you, this tip was really helpful to me in solving my problem, i m sorry for not being complete and accurate in my question but I am a new user on stackoverflow — antoniodilorenzo, Sep 22 '22 at 09:13

Autocomplete JQuery shows all the results without filtering them

1 Answers1