Auto Complete: All about

ASP.NET – Use “AJAX AutoCompleteExtender”

Assign a “ServiceMethod”, a “TargetControlID”, a “OnClientItemSelected” to “AutoCompleteExtender”
• ServiceMethod is a WebService returning data for autocomplete
• TargetControlID is a TextBox where user input keyword
• OnClientItemSelected is a callback function when user selects value

Javascript – Use “jQueryUI”

Assign an “array”, a “target ID”, “select” to “autocomplete”
• “array” is data for autocomplete
• “target ID” is a TextBox where user input keyword
• “select” is a callback function when user selects value

Javascript – Use “Awesomplete”

Install

[js]https://leaverou.github.io/awesomplete/[/js]

Embedding

[js]
[/js]

Usage

[js]
//var sourceData = [‘AAA’, ‘BBB’, ‘CCC’, ‘ABC’, ‘AAB’, ‘AAC’];
// Create auto complete for a text box from source of a drop down list
var sourceData = [];
$(“#dropDownList option”).each(function(index) {
//var obj = new Object();
//obj.label = $(this).text();
//obj.value = $(this).val();
sourceData.push($(this).text());
});

var input = document.getElementById(“txtInputId”);
new Awesomplete(input, {
list: sourceData,
maxItems: 1000
});
document.getElementById(‘txtInputId’).addEventListener(‘awesomplete-selectcomplete’,function(){
var text = this.value;
var value = $(‘#dropDownList option’).filter(function () { return $(this).html() == text; }).val();
$(‘#txtInputId’).val(text);
});
[/js]