It is useful now using auto-compete rather than loading all the data in a drop down list. There are several way to this. Microsoft asp.net providing AutoCompleteExtender ajaxtoolkit. But here i have used the popular Jquery autocomplete plugin which uses web-service to load the data once and then with the search string from the text box we actually show data from the previously loaded list.
Here are the steps below :
First call the web method from client side to laod the data.
var lstPersons;//Get data, fill into array
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "SearchService.asmx/Search",
data: "{}",
success: function(res) {
//Fill the array with the recieved data
lstPersons = res.d;
}
})
*Notice you will get the return list array in a res.d by default.
Then from the html control focus event we query the result from the lstPerson.
$("#txt_serach").focus(function() {
$("#txt_serach").autocomplete(lstPersons, {
minChars: 0,
width: 300,
matchContains: true,
autoFill: false,
formatItem: function(row, i, max) {
return i + "/" + max + ": \"" + row.PreName + ' ' + row.Name + "\" [" + row.Country + "]";
//return row.DocTitle;
},
formatMatch: function(row, i, max) {
return row.PreName + ' ' + row.Name; //row.Name;
},
formatResult: function(row) {
//return row.DocTitle;
return row.PreName + ' ' + row.Name;
}
});
});
The output will look as below :
To implement above auto complete I have used here Jquery Autocomplete plugin
* Autocomplete - jQuery plugin 1.0.2
* Copyright (c) 2007 Dylan Verheul, Dan G. Switzer, Anjesh Tuladhar, Jörn Zaefferer
* Dual licensed under the MIT and GPL licenses
and special thanks to Mr. Abdullah Kiser.
Sample code is available at
http://www.codeproject.com/KB/aspnet/Autocomplete_textbox.aspx
