Limit results in jQuery UI Autocomplete

Question

I am using jQuery UI Autocomplete.

 $("#task").autocomplete({
     max:10,
     minLength:3,
     source: myarray
 });          

The max parameter doesn't work and I still get more than 10 results. Am I missing something?

Answer 1

Here is the proper documentation for the jQueryUI widget. There isn't a built-in parameter for limiting max results, but you can accomplish it easily:

$("#auto").autocomplete({
    source: function(request, response) {
        var results = $.ui.autocomplete.filter(myarray, request.term);

        response(results.slice(0, 10));
    }
});

You can supply a function to the source parameter and then call slice on the filtered array.

Here's a working example: http://jsfiddle.net/andrewwhitaker/vqwBP/

Answer 2

You can set the minlength option to some big value or you can do it by css like this,

.ui-autocomplete { height: 200px; overflow-y: scroll; overflow-x: hidden;}

Answer 3

Same like "Jayantha" said using css would be the easiest approach, but this might be better,

.ui-autocomplete { max-height: 200px; overflow-y: scroll; overflow-x: hidden;}

Note the only difference is "max-height". this will allow the widget to resize to smaller height but not more than 200px

Answer 4

Adding to Andrew's answer, you can even introduce a maxResults property and use it this way:

$("#auto").autocomplete({ 
    maxResults: 10,
    source: function(request, response) {
        var results = $.ui.autocomplete.filter(src, request.term);
        response(results.slice(0, this.options.maxResults));
    }
});

jsFiddle: http://jsfiddle.net/vqwBP/877/

This should help code readability and maintainability!

Answer 5

here is what I used

.ui-autocomplete { max-height: 200px; overflow-y: auto; overflow-x: hidden;}

The overflow auto so the scroll bar will not show when it's not supposed to.

Answer 6

I could solve this problem by adding the following content to my CSS file:

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

Answer 7

If the results come from a mysql query, it is more efficient to limit directly the mysql result:

select [...] from [...] order by [...] limit 0,10

where 10 is the max numbers of rows you want

Answer 8

I did it in following way :

success: function (result) {
response($.map(result.d.slice(0,10), function (item) {
return {
// Mapping to Required columns (Employee Name and Employee No)
label: item.EmployeeName,
value: item.EmployeeNo
}
}
));

Answer 9

jQuery allows you to change the default settings when you are attaching autocomplete to an input:

$('#autocomplete-form').autocomplete({
   maxHeight: 200, //you could easily change this maxHeight value
   lookup: array, //the array that has all of the autocomplete items
   onSelect: function(clicked_item){
      //whatever that has to be done when clicked on the item
   }
});

Answer 10

Plugin: jquery-ui-autocomplete-scroll with scroller and limit results are beautiful

$('#task').autocomplete({
  maxShowItems: 5,
  source: myarray
});

Answer 11

I've tried all the solutions above, but mine only worked on this way:

success: function (data) {
    response($.map(data.slice (0,10), function(item) {
    return {
    value: item.nome
    };
    }));
},

Answer 12

There is no max parameter.

http://docs.jquery.com/UI/Autocomplete

Answer 13

In my case this works fine:

source:function(request, response){
    var numSumResult = 0;
    response(
        $.map(tblData, function(rowData) {
            if (numSumResult < 10) {
                numSumResult ++;
                return {
                    label:          rowData.label,
                    value:          rowData.value,
                }
            }
        })
    );
},

Answer 14

I'm leaving this one for anyone who is using this library

JavaScript-autoComplete/1.0.4/auto-complete.js

This might be helpful as the Demo version doesn't show how to limit results. Based on Andrew response.

new autoComplete({
    selector: 'input[name="name_of_searchbox"]',
    minChars: 1,
    source: function(term, suggest){
    term = term.toLowerCase();
    var choices = [];
     var matches = []; //For Pushing Selected Terms to be always visible, can be adapter later on based on user searches
      for (i=0; i<choices.length; i++)
          if (~choices[i].toLowerCase().indexOf(term)) matches.push(choices[i]);
      suggest(matches.slice(0,10));
     }
    });

Hope this is of use to anyone. Cheers!

Answer 15

.ui-menu-item{
    display: none;
}
.ui-menu-item:nth-child(-n+5){
    display: block;
}