无法复制 Jquery Mobile Autocomplete 演示

Question

I am trying to replicate this demo with my own remote data source:我正在尝试使用我自己的远程数据源复制此演示：

http://demos.jquerymobile.com/1.4.5/listview-autocomplete-remote/ http://demos.jquerymobile.com/1.4.5/listview-autocomplete-remote/

My HTML page is exactly the same as the demo with one difference:我的 HTML 页面与演示完全相同，但有一点不同：

url: "http://localhost/sample.php",

And here's my dummy remote data source sample.php这是我的虚拟远程数据源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.由于我的虚拟数据只是一个简单的数组，我希望它会用"apple", "mango"自动完成，但什么也没有出现。

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).');';

Answer 1

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: HTML 中缺少一行作为 next JS $( document ).on( "pagecreate", "#myPage", function() { expects #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>

So if you add that missing div <div data-role="page" id="myPage"> and use next php code, then everything will work fine:因此，如果您添加缺少的 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);";
?>

Just in case, these are 2 files I used in my test:以防万一，这些是我在测试中使用的 2 个文件：

http://pastebin.com/7p4b4mmB http://pastebin.com/7p4b4mmB
http://pastebin.com/svPYtHqP (url, pointing to PHP, should be replaced) http://pastebin.com/svPYtHqP（url ，指向PHP，应该替换）

无法复制 Jquery Mobile Autocomplete 演示

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-11-22 20:15:46

无法复制 Jquery Mobile Autocomplete 演示

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-11-22 20:15:46

解决方案1
1 已采纳 2015-11-22 20:15:46