Implement Jquery Auto Complete

Jquery Auto Complete

In this article we will show you how to use auto complete of jQuery. Auto complete widget provides suggestions while you type into the field. Here we are going to show you an example that how to implement auto complete and how we can customize it as per our requirement.

In the below example, we have 3 different objects in an array:
 
var data = [{
label: "Code",
value: "http://www.codehotfix.com"
},
{
label: "Hotfix",
value: "http://www.codehotfix.com"
},
{
label: "Code Hotfix",
value: "http://www.codehotfix.com"}
];
$(function () {
$("#idOfSearchTextBox").autocomplete({
source: function (request, response) {
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
response($.grep(data, function (item) {
return matcher.test(item.label);
}));
},
select: function (event, ui) {
$("#idOfSearchTextBox").val(ui.item.label);
window.location.href = ui.item.value;
}
});
});

hotfix

Continue reading “Implement Jquery Auto Complete”