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?
This question is related to
jquery-ui
autocomplete
jquery-ui-autocomplete
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/
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,
}
}
})
);
},
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;}
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;
}
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
}
});
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
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
};
}));
},
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
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!
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
}
}
));
Plugin: jquery-ui-autocomplete-scroll with scroller and limit results are beautiful
$('#task').autocomplete({
maxShowItems: 5,
source: myarray
});
There is no max parameter.
Source: Stackoverflow.com