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;
}
});
}
});
You could find more documentation here..
http://jqueryui.com/autocomplete/
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; }