不能复制jQuery Mobile的自动完成功能演示 [英] Can't replicate Jquery Mobile Autocomplete demo
问题描述
我试图复制这个演示用我自己的远程数据源：
http://demos.jquerymobile.com/1.4.5/listview -autocomplete远程/
我的HTML页面是完全一样的有一点不同的演示：
URL：HTTP：//localhost/sample.php
这是我的虚拟远程数据源 sample.php
＆LT; PHP$ A =阵列（'苹果'，'芒果'）;回声json_en code（$ A）;
什么可以在这里失踪？由于我的虚拟数据仅仅是一个简单的数组，我期待，它将与苹果自动完成芒果但似乎什么都没有。
编辑：我尝试以下，仍然不能正常工作：
＆LT; PHP$ A =阵列（苹果，芒果）;标题（内容类型：应用程序/ JavaScript的;字符集= utf-8'）;。回声$ _GET ['回调']'（'。json_en code（$ A）。'）;;
查看源代码，其实所在。有一个在HTML缺少线下一个JS 的$（document）。在（pagecreate，#myPage功能（）{期望＃我的页面因此，HTML看起来应该是这样的：
＆LT;身体GT;
＆LT;！ - 这个分区不见了 - ＆GT;
＆LT; DIV数据角色=页面ID =我的空间＆GT;
＆LT; H3＆GT;全球和LT城市; / H3 GT＆;
＆LT; P＆gt;在你进入＆LT;强＆GT;至少有三个字符＆LT; / STRONG＆GT;自动完成功能会显示所有可能的匹配＆LT; / P＆GT;
＆LT;窗体类=UI-过滤＆GT;
＆LT;输入ID =自动完成输入数据类型=搜索占位符=寻找城市...＆GT;
＆LT; /表及GT;
＆LT; UL ID =自动完成数据角色=列表视图数据插入=真正的数据过滤器=真正的数据输入=＃自动完成输入＆GT;＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
因此，如果您添加缺少的div ＆LT; DIV数据角色=页面ID =我的空间＆GT; 键，下次使用PHP code，则一切都将正常工作：
＆LT; PHP
标题（内容类型：应用程序/ JavaScript的;字符集= utf-8'）;
$回调= $ _GET ['回调'];
$ Q = $ _GET ['Q'];
$ JSON = json_en code（['苹果'，'芒果']）;
回声$回调（$ JSON）;;
？＆GT;
以防万一，这些都是我在测试中使用的两个文件：
- http://pastebin.com/7p4b4mmB
- http://pastebin.com/svPYtHqP （网址，指向PHP，应及时更换）
I am trying to replicate this demo with my own remote data source:
http://demos.jquerymobile.com/1.4.5/listview-autocomplete-remote/
My HTML page is exactly the same as the demo with one difference:
url: "http://localhost/sample.php",
And here's my dummy remote data source sample.php
<?php
$a = array('apple', 'mango');
echo json_encode($a);
What could be missing here? Since my dummy data is just a simple array, I am expecting that it will autocomplete with "apple", "mango" but nothing appears.
Edit: I tried the following, still doesn't work:
<?php
$a = array("apple", "mango");
header('Content-Type: application/javascript; charset=utf-8');
echo $_GET['callback'].'('.json_encode($a).');';
The "View source" actually lies. There's a missing line in HTML as next JS $( document ).on( "pagecreate", "#myPage", function() { expects #myPage. Thus, HTML should look this way:
<body>
<!-- this div was missing -->
<div data-role="page" id="myPage">
<h3>Cities worldwide</h3>
<p>After you enter <strong>at least three characters</strong> the autocomplete function will show all possible matches.</p>
<form class="ui-filterable">
<input id="autocomplete-input" data-type="search" placeholder="Find a city...">
</form>
<ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-input="#autocomplete-input"></ul>
</div>
</body>
So if you add that missing div <div data-role="page" id="myPage"> and use next php code, then everything will work fine:
<?php
header('Content-Type: application/javascript; charset=utf-8');
$callback = $_GET['callback'];
$q = $_GET['q'];
$json = json_encode(['apple', 'mango']);
echo "$callback($json);";
?>
Just in case, these are 2 files I used in my test:
- http://pastebin.com/7p4b4mmB
- http://pastebin.com/svPYtHqP (url, pointing to PHP, should be replaced)
这篇关于不能复制jQuery Mobile的自动完成功能演示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
