listview filter: autocomplete demo

issue #5096
jquery-archive · Dec 6, 2012 · 37fe2cc · 37fe2cc
1 parent 4437c3d
commit 37fe2cc
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 0 deletions.
diff --git a/docs/demos/index.html b/docs/demos/index.html
@@ -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>

diff --git a/docs/demos/listviews/listview-filter-autocomplete.html b/docs/demos/listviews/listview-filter-autocomplete.html
@@ -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>