簡體   English   中英

無法復制 Jquery Mobile Autocomplete 演示

[英]Can't replicate Jquery Mobile Autocomplete demo

我正在嘗試使用我自己的遠程數據源復制此演示:

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 中缺少一行作為 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>

因此,如果您添加缺少的 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 個文件:

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM