Permalink
Browse files

listview filter: autocomplete demo

issue #5096
  • Loading branch information...
1 parent 4437c3d commit 37fe2cc6a31b563fa775f2cf916108b1a6b577a6 @gseguin committed Dec 6, 2012
Showing with 81 additions and 0 deletions.
  1. +1 −0 docs/demos/index.html
  2. +80 −0 docs/demos/listviews/listview-filter-autocomplete.html
@@ -49,6 +49,7 @@ <h1 id="jqm-logo"><img src="_assets/img/jquery-logo.png" alt="jQuery Mobile Fram
<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.