Skip to content
This repository
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 82 lines (70 sloc) 2.329 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Listview Autocomplete - jQuery Mobile Demos</title>
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css">
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
<script src="../../../js/jquery.js"></script>
<script src="../_assets/js/jqm-demos.js"></script>
<script src="../../../js/"></script>
    <script>
$( 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'><span class='ui-icon ui-icon-loading'></span></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");
});
}
});
});
    </script>
<style>
.ui-listview-filter-inset {
margin-top: 0;
}
    </style>
</head>
<body>
<div data-role="page" id="myPage">

<div data-role="header" data-theme="f">
<h1>Listview Autocomplete</h1>
<a href="../" data-icon="home" data-iconpos="notext" data-ajax="false">Home</a>
</div><!-- /header -->

<div data-role="content">

<div class="content-primary">
        
         <h2>Cities worldwide</h2>

<div data-demo-html="true" data-demo-js="true" data-demo-css="true">
             <p>After you entered 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-theme="d"></ul>
</div><!--/demo-html -->


</div><!--/content-primary -->

</div><!-- /content -->

<div class="jqm-footer">
<p class="jqm-version"></p>
<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div><!-- /jqm-footer -->

</div><!-- /page -->

</body>
</html>
Something went wrong with that request. Please try again.