Permalink
Browse files

listview filter: autocomplete demo

issue #5096
  • Loading branch information...
gseguin committed Dec 6, 2012
1 parent 4437c3d commit 37fe2cc6a31b563fa775f2cf916108b1a6b577a6
Showing with 81 additions and 0 deletions.
  1. +1 −0 docs/demos/index.html
  2. +80 −0 docs/demos/listviews/listview-filter-autocomplete.html
View
@@ -49,6 +49,7 @@ <h2>Demos</h2>
<li data-role="list-divider">Listviews</li>
<li><a href="listviews/listview.html" data-ajax="false">Listviews</a></li>
<li><a href="listviews/listview-filter-autodividers.html" data-ajax="false">Listview Filter &amp; Autodividers</a></li>
<li><a href="listviews/listview-filter-autocomplete.html" data-ajax="false">Autocomplete from a remote source using listview</a></li>
<li><a href="listviews/listview-forms.html" data-ajax="false">Listview Forms</a></li>
<li><a href="listviews/collapsible-listview.html" data-ajax="false">Collapsible listview</a></li>
<li data-role="list-divider">Grids</li>
@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Listview Filter &amp; Autodividers - 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 ).ready( function() {
$( "#autocomplete" ).listview({
filter: true
});
$( "#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" );
}
)
}
}
);
});
</script>
</head>
<body>
<div data-role="page">
<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">
<div data-demo-html="true" data-demo-js="true">
<ul id="autocomplete" 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>

0 comments on commit 37fe2cc

Please sign in to comment.