我正在尝试用我自己的远程数据源复制这个演示:
http://demos.jquerymobile.com/1.4.5/listview-autocomplete-remote/
我的 HTML 页面与演示完全相同，只有一点不同:
url: "http://localhost/sample.php",
这是我的虚拟远程数据源 sample.php
<?php
$a = array('apple', 'mango');
echo json_encode($a);
这里可能缺少什么？由于我的虚拟数据只是一个简单的数组，我希望它会自动完成 "apple", "mango" 但什么也没有出现。
编辑:我尝试了以下方法，仍然无效:
<?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 应该是这样的:
<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 代码，然后一切都会正常工作:
<?php
header('Content-Type: application/javascript; charset=utf-8');
$callback = $_GET['callback'];
$q = $_GET['q'];
$json = json_encode(['apple', 'mango']);
echo "$callback($json);";
?>
以防万一，这些是我在测试中使用的 2 个文件:
- http://pastebin.com/7p4b4mmB
- http://pastebin.com/svPYtHqP (url，指向PHP，应该替换)
关于javascript - 无法复制 Jquery Mobile 自动完成演示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33834280/