jquery ui autocomplete in a nutshell
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<input type="text" id="ipt_Countryres" name="ipt_Countryres" class="ipt_Field" />
<input type="text" class="ipt_Field" id="get_country" name="get_country" / disabled>
JavaScript
$(function () {
var country_list = [{
"id": "Afghanistan",
"label": "Afghanistan",
"value": "AF"
}, {
"id": "Åland Islands",
"label": "Åland Islands",
"value": "AX"
}, {
"id": "Albania",
"label": "Albania",
"value": "AL"
}];
$("#ipt_Countryres").autocomplete({
source: country_list,
minLength: 3,
max:10,
select: function (event, ui) {
// Prevent value from being put in the input:
$('#ipt_Countryres').val(ui.item.label);
$('#get_country').val(ui.item.label);
event.preventDefalut();
// Set the next input's value to the "value" of the item.
}
});
// mustMatch (no value) implementation
$("#ipt_Countryres").focusout(function() {
$('#ipt_Countryres').val($('#get_country').val());
});
});