Skip to content

Commit 33faf2c

Browse files
gseguingseguin
committed
Merge pull request jquery-archive#5371 from gseguin/issue-5096
Demos: remote auto-complete demo using listview
2 parents 7c12806 + 9d474be commit 33faf2c

File tree

2 files changed

+77
-0
lines changed

2 files changed

+77
-0
lines changed

‎docs/demos/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ <h2>Demos</h2>
4949
<li data-role="list-divider">Listviews</li>
5050
<li><a href="listviews/listview.html" data-ajax="false">Listviews</a></li>
5151
<li><a href="listviews/listview-filter-autodividers.html" data-ajax="false">Listview Filter &amp; Autodividers</a></li>
52+
<li><a href="listviews/listview-filter-autocomplete.html" data-ajax="false">Autocomplete from a remote source using listview</a></li>
5253
<li><a href="listviews/listview-forms.html" data-ajax="false">Listview Forms</a></li>
5354
<li><a href="listviews/collapsible-listview.html" data-ajax="false">Collapsible listview</a></li>
5455
<li data-role="list-divider">Grids</li>

‎docs/demos/listviews/listview-filter-autocomplete.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Listview Filter &amp; Autodividers - jQuery Mobile Demos</title>
7+
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css">
8+
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
9+
<script src="../../../js/jquery.js"></script>
10+
<script src="../_assets/js/jqm-demos.js"></script>
11+
<script src="../../../js/"></script>
12+
<script>
13+
$( document ).on( "pageinit", "#myPage", function() {
14+
$( "#autocomplete" ).on( "listviewbeforefilter",
15+
function ( e, data ) {
16+
var $ul = $( this ),
17+
$input = $( data.input ),
18+
value = $input.val(),
19+
html = "";
20+
$ul.html( "" );
21+
if ( value && value.length > 2 ) {
22+
$ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
23+
$ul.listview( "refresh" );
24+
$.ajax( {
25+
url: "http://gd.geobytes.com/AutoCompleteCity",
26+
dataType: "jsonp",
27+
crossDomain: true,
28+
data: {
29+
q: $input.val()
30+
}
31+
}).
32+
then(
33+
function ( response ) {
34+
$.each( response, function ( i, val ) {
35+
html += "<li>" + val + "</li>";
36+
} );
37+
$ul.html( html );
38+
$ul.listview( "refresh" );
39+
}
40+
)
41+
}
42+
}
43+
);
44+
} );
45+
</script>
46+
</head>
47+
<body>
48+
<div data-role="page" id="myPage">
49+
50+
<div data-role="header" data-theme="f">
51+
<h1>Listview Autocomplete</h1>
52+
<a href="../" data-icon="home" data-iconpos="notext" data-ajax="false">Home</a>
53+
</div><!-- /header -->
54+
55+
<div data-role="content">
56+
57+
<div class="content-primary">
58+
59+
<div data-demo-html="true" data-demo-js="true">
60+
<ul id="autocomplete" data-role="listview" data-filter="true" data-filter-theme="d"></ul>
61+
</div><!--/demo-html -->
62+
63+
64+
</div><!--/content-primary -->
65+
66+
</div><!-- /content -->
67+
68+
<div class="jqm-footer">
69+
<p class="jqm-version"></p>
70+
<p>&copy; 2012 jQuery Foundation and other contributors</p>
71+
</div><!-- /jqm-footer -->
72+
73+
</div><!-- /page -->
74+
75+
</body>
76+
</html>

0 commit comments

Comments
 (0)