无法复制 Jquery Mobile 自动完成演示答案

【问题标题】：Can't replicate Jquery Mobile Autocomplete demo无法复制 Jquery Mobile 自动完成演示
【发布时间】：2023-04-05 00:38:01
【问题描述】：

我正在尝试使用我自己的远程数据源复制此演示：

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 试过但没用
你是否在同一个域上使用这两个脚本？

标签： javascript php jquery jquery-mobile autocomplete

【解决方案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”。
骂人是的！毕竟这只是我的问题。让我头疼了好几天。我应得的赏金！开玩笑哈哈