无法复制 Jquery Mobile 自动完成演示
Posted
技术标签:
【中文标题】无法复制 Jquery Mobile 自动完成演示【英文标题】：Can't replicate Jquery Mobile Autocomplete demo 【发布时间】：2016-02-23 09:20:36 【问题描述】：我正在尝试使用我自己的远程数据源复制此演示：
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).');';
【问题讨论】：
你用的是萤火虫还是类似的东西？如果是这样，控制台会说什么吗？ @MartinE。它似乎响应正常：i.imgur.com/WnClii8.png header("Content-Type: application/json"); @ojovirtual 试过但没用 你是否在同一个域上使用这两个脚本？ 【参考方案1】：“查看源代码”实际上是在说谎。 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，应该换掉）【讨论】：
您的回答有道理，但我的测试页面中也缺少一行，但您知道吗，我发现了问题：包括 jqm 的 CSS 导致它！<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 尝试将该行包含在您的测试页面中，它不会起作用，但显然它适用于他们的演示 PHP。对此有何想法？
仍然有效 - 即使包含此 CSS。您可以轻松下载我的 HTML 并尝试（即使没有本地主机） - 只需在浏览器中即可。那里的 URL 指向一个免费的类似 PHP 小提琴的服务：http://main.xfiddle.com/code_94010918.php?callback=apple&q=123
嗯，我正在您的确切页面中对其进行测试。我用 CSS 得到这个：i.imgur.com/WFg7wmW.png 而没有这个：i.imgur.com/dLvceAs.png
哦，我明白你的意思了：CSS 可以隐藏。尝试输入“apple”而不是“test”或“mango”。
骂人是的！毕竟这只是我的问题。让我头疼了好几天。我应得的赏金！开玩笑哈哈以上是关于无法复制 Jquery Mobile 自动完成演示的主要内容，如果未能解决你的问题，请参考以下文章
使用 jQuery Mobile 1.4.2 远程自动完成列表视图提交表单？
远程数据源如何在 Jquery Mobile 自动完成中工作？