无法复制Jquery Mobile自动完成演示 [英] Can't replicate Jquery Mobile Autocomplete demo
问题描述
我正在尝试使用自己的远程数据源复制此演示:
I am trying to replicate this demo with my own remote data source:
http://demos.jquerymobile.com/1.4.5/listview-autocomplete-remote/
我的HTML页面与演示完全相同，但有一个区别:
My HTML page is exactly the same as the demo with one difference:
URL:"http://localhost/sample.php"，
这是我的虚拟远程数据源 sample.php
And here's my dummy remote data source sample.php
<?php
$a = array('apple', 'mango');
echo json_encode($a);
这里可能缺少什么?由于我的伪数据只是一个简单的数组，我希望它会自动完成，并带有"apple"，"mango" ，但是什么也不会出现.
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.
我尝试了以下操作，但仍然无法正常工作:
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).');';
推荐答案
实际上是查看源代码"所在.HTML中缺少一行作为下一个JS $(document).on("pagecreate"，"#myPage"，function(){期望 #myPage .因此，HTML应该看起来像这样:
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>
因此，如果您添加缺少的div < div data-role ="page" id ="myPage"> 并使用下一个php代码，则一切正常:
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);";
?>
以防万一，这是我在测试中使用的2个文件:
Just in case, these are 2 files I used in my test:
- http://pastebin.com/7p4b4mmB
- http://pastebin.com/svPYtHqP (指向PHP的网址应替换)
- http://pastebin.com/7p4b4mmB
- http://pastebin.com/svPYtHqP (url, pointing to PHP, should be replaced)
这篇关于无法复制Jquery Mobile自动完成演示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
