This example is build on top of the HTML5 datalist element and uses webshims to polyfill and enhance the user interface.
<input data-remote-list="data.json"
data-list-highlight="true"
data-list-value-completion="true"
class="static-remote" type="text" />
$('input.static-remote').remoteList({
minLength: 0,
maxLength: 0,
select: function(){
if(window.console){
console.log($(this).remoteList('selectedOption'), $(this).remoteList('selectedData'))
}
}
});
<input
data-list-filter="!"
class="geo-autocomplete" type="text" />
$('input.geo-autocomplete').remoteList({
maxLength: 9,
source: function(val, response){
$.ajax({
url: 'http://geo-autocomplete.com/api/country',
dataType: 'jsonp',
data: {
q: val,
key: '37693c',
nl: true
},
success: function(data){
$.each(data, function(i, item){
item.value = item.country_name;
});
response(data);
}
});
},
select: function(){
if(window.console){
console.log($(this).remoteList('selectedOption'), $(this).remoteList('selectedData'))
}
}
});