Skip to content
Browse files

Merge pull request #5371 from gseguin/issue-5096

Demos: remote auto-complete demo using listview
  • Loading branch information...
2 parents 7c12806 + 9d474be commit 33faf2c9233a94a8b6ebc8d73739f27988cf3dae @gseguin gseguin committed Dec 14, 2012
Showing with 77 additions and 0 deletions.
  1. +1 −0 docs/demos/index.html
  2. +76 −0 docs/demos/listviews/listview-filter-autocomplete.html
View
1 docs/demos/index.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>
View
76 docs/demos/listviews/listview-filter-autocomplete.html
@@ -0,0 +1,76 @@
+<!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 ).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" );
+ }
+ )
+ }
+ }
+ );
+ } );
+ </script>
+</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">
+
+ <div data-demo-html="true" data-demo-js="true">
+ <ul id="autocomplete" data-role="listview" 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>

0 comments on commit 33faf2c

Please sign in to comment.
Something went wrong with that request. Please try again.