Martin Martin - 1 year ago 118
jQuery Question

Limit the result in jQuery Autocomplete

How can you set a limit on the result from the jQuery autocomplete?

This is my code:

url: "/cache/search/SearchModels.xml",
dataType: "xml",
success: function(xmlResponse) {
var data = $("SearchModel", xmlResponse).map(function() {
return {
value: $("Name", this).text() + ", " + $("Description", this).text(),
id: $("No", this).text(),
name: $("Name", this).text(),
url: $("URL", this).text()
source: data,
minLength: 2,
select: function(event, ui) {
if (typeof (ui.item.url) != 'undefined') {
window.location = ui.item.url;
else {
alert('Page not found!');
search: function(event, ui) {
close: function(event, ui) {
}).data("autocomplete")._renderItem = function(ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a><span style='font-size:.9em; font-weight:bold;'>" + + "</span><br /><span style='font-size:.8em;'>" + + "</span></a>")
error: function(xhr, textStatus, errorThrown) {
alert('Error: ' + xhr.statusText);

This code return all results in the query, but I want to limit this to just showing 10 results. In the old autocomplete version there was an option for this, but it is now deprecated.

Example of the XML:

<?xml version="1.0"?>
<ArrayOfSearchModel xmlns:xsi="" xmlns:xsd="">
<Name>My product</Name>
<Description>My description</Description>

Answer Source

Final Update
after understanding that in my previous answers i was limiting the whole xml result set and not the results of the autocomplete

As you have overridden the default _renderItem method, you can override the default _renderMenu.

$.ui.autocomplete.prototype._renderMenu = function( ul, items ) {
   var self = this;
   $.each( items, function( index, item ) {
      if (index < 10) // here we define how many results to show
         {self._renderItem( ul, item );}

answer is modified from this jQueryUI: how can I custom-format the Autocomplete plug-in results? so thanks go to @cheeso..

Original Answer

In you success callback use $("SearchModel:lt(10)", xmlResponse).map(...

The :lt(10) gets elements with an index of less than 10. So max 10 results will be returned..

(of course the number 10 could be anything you want)

Look at :lt() selector at


Although i cannot understand why the first answer does not work, since the SearchModel is a tag and we target that.. we can move the filtering in the map method..

success: function(xmlResponse) {
                var data = $("SearchModel", xmlResponse).map(function(index) {
                    if (index<10)
                        return {
                            value: $("Name", this).text() + ", " + $("Description", this).text(),
                            id: $("No", this).text(),
                            name: $("Name", this).text(),
                            url: $("URL", this).text()
                      { return null; }

documentation of map()

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download