Limit results in jQuery UI Autocomplete

I am using jQuery UI Autocomplete.

     source: myarray

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


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:

    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:

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;}

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

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

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


This should help code readability and maintainability!

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.

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;

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

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

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

   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

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

  maxShowItems: 5,
  source: myarray

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

There is no max parameter.

In my case this works fine:

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

Need Your Help

How to create a reorder-able TableView in JavaFx

java user-interface javafx

I have a JavaFx TableView. I'd like to allow the user to click and drag to reorder the table rows. I can't seem to find any way to do this, but it seems like a pretty common thing in GUIs.

How do I write an ADL-enabled trailing return type, or noexcept specification?

c++ c++11 argument-dependent-lookup noexcept

Imagine I'm writing some container template or something. And the time comes to specialize std::swap for it. As a good citizen, I'll enable ADL by doing something like this: