jQuery Mobile Autocomplete
With Local Data:-
HTML
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search cars...">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Chrysler</a></li>
<li><a href="#">Dodge</a></li>
<li><a href="#">Ferrari</a></li>
<li><a href="#">Ford</a></li>
<li><a href="#">GMC</a></li>
<li><a href="#">Honda</a></li>
<li><a href="#">Hyundai</a></li>
<li><a href="#">Infiniti</a></li>
<li><a href="#">Jeep</a></li>
<li><a href="#">Kia</a></li>
<li><a href="#">Lexus</a></li>
<li><a href="#">Mini</a></li>
<li><a href="#">Nissan</a></li>
<li><a href="#">Porsche</a></li>
<li><a href="#">Subaru</a></li>
<li><a href="#">Toyota</a></li>
<li><a href="#">Volkswagen</a></li>
<li><a href="#">Volvo</a></li>
</ul>
Demo Here:
http://jsfiddle.net/o22swr9g/[
^]
With Remote Data:-
HTML
<h3>Cities worldwide</h3>
<p>After you enter at least three characters the autocomplete function will show all possible matches.</p>
<ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a city..." data-filter-theme="d"></ul>
CSS
.ui-listview-filter-inset {
margin-top: 0;
}
JS
$( document ).on( "pageinit", "#myPage", function() {
$( "#autocomplete" ).on( "listviewbeforefilter", function ( e, data ) {
var $ul = $( this ),
$input = $( data.input ),
value = $input.val(),
html = "";
$ul.html( "" );
if ( value && value.length > 2 ) {
$ul.html( "<li><div class="ui-loader"></div></li>" );
$ul.listview( "refresh" );
$.ajax({
url: "http://gd.geobytes.com/AutoCompleteCity",
dataType: "jsonp",
crossDomain: true,
data: {
q: $input.val()
}
})
.then( function ( response ) {
$.each( response, function ( i, val ) {
html += "<li>" + val + "</li>";
});
$ul.html( html );
$ul.listview( "refresh" );
$ul.trigger( "updatelayout");
});
}
});
});
Demo Here:
http://jsfiddle.net/o22swr9g/1/[
^]