Limit results autocomplete jquery ui with slice function

Question

I need to limit results (max 10) in this autocomplete jquery ui script. I know I have to use the slice function, but I'm not able to place it correctly inside the script. Thanks in advance for your help.

$(document).ready(function() {
    var myArr = [];

    $.ajax({
        type: "GET",
        url: "events.xml", // change to full path of file on server
        dataType: "xml",
        success: parseXml,
        complete: setupAC,
        failure: function(data) {
            alert("XML File could not be found");
            }
    });

    function parseXml(xml)
    {
        //find every query value
        $(xml).find("topevent").each(function()
        {
            //you are going to create an array of objects 
        var thisItem = {}; 
        thisItem['label'] = $(this).attr("label"); 
        thisItem['value'] = $(this).attr("value");
        myArr.push(thisItem); 

        }); 
    }

    function setupAC() {
    $("input#searchBoxEv").autocomplete({
    source: myArr,
    minLength: 3,
    select: function(event, ui) {
    var urlString = "http://mysite.com/" +  "eventi/" + (ui.item.value) + ".html";
    $("input#searchBoxEv").val(urlString);
    location.href=urlString;

                           }
    });
}
});

I used css (height and max-height) as you suggested me, but with a huge xml file is not the best solution. — Andrea Otto, Oct 18 '12 at 10:30

score 2 · Answer 1 · answered Oct 18 '12 at 10:02

2

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

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

You could find more documentation here..

http://jqueryui.com/autocomplete/

answered Oct 18 '12 at 10:02

Xavier

1,672
5
27
46

I have already seen this documentation, but I'm not able to include function slice in my script. – Andrea Otto Oct 18 '12 at 10:31

score 0 · Answer 2 · answered Oct 19 '12 at 07:33

0

Finally I solved the problem adding two parameters in jquery.ui css: max height and overflow:hidden. Autocomplete is initialized at 3° letter, for better results people have to type more. It works with five different browsers (IE, Chrome, Opera, Firefox, Safari).

.ui-autocomplete { position: absolute; cursor: default; text-align:left; max-height:245px; overflow:hidden; }

answered Oct 19 '12 at 07:33

Andrea Otto

21
1
4

like Xavier said : http://stackoverflow.com/questions/7617373/limit-results-in-jquery-ui-autocomplete but maybe your solution can help too. Also, if your source myarray is the result of a SQL query, you can limit row of your query result. For instance with [limit ] in MySQL – Nico Sep 02 '13 at 18:16
or better using query->setMaxResults(n) with your ORM. – Nico Sep 02 '13 at 18:33

Limit results autocomplete jquery ui with slice function

2 Answers2

Linked