jQuery Mobile Autocomplete

<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>

<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>

.ui-listview-filter-inset {
    margin-top: 0;
}

$( 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");
            });
        }
    });
});