0
我試圖讓jQuery Mobile自動完成功能工作,但它只能用外部數據成功。當我嘗試使用我自己的JSON數據時失敗。jQuery Mobile自動完成JSON數據
通過下面js中的註釋行,它可以很好地處理外部數據,但與我自己的數據無關。
JS:
$(document).on("pageinit", "#mainPage", function() {
$("#autocomplete").on("listviewbeforefilter", function (e, data) {
var $ul = $(this),
$input = $(data.input),
value = $input.val(),
html = "";
$ul.html("");
if (value && value.length > 2) {
$ul.html("<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>");
$ul.listview("refresh");
$.ajax({
type : 'GET',
//url: "http://gd.geobytes.com/AutoCompleteCity",
url: "data/specs_search.php",
dataType: "jsonp",
data: {
q: $input.val()
}
})
.then(function (response) {
$.each(response, function (i, val) {
html += "<li>" + val + "</li>";
});
$ul.html(html);
$ul.listview("refresh");
$ul.trigger("updatelayout");
});
}
});
});
specs_search.php JSON輸出:
["Rota, AN, Spain","Rotan, TX, United States","Rothbury, MI, United States","Rothesay, NB, Canada","Rothsay, MN, United States","Rothschild, WI, United States","Rothville, MO, United States","Rothwell, QL, Australia","Rotonda West, FL, United States","Rotorua, BP, New Zealand","Rottenburg, BW, Germany","Rotterdam Junction, NY, United States","Rotterdam, ZH, Netherlands","Barcarrota, EX, Spain","Brothers, OR, United States","Crothersville, IN, United States","Croton Falls, NY, United States","Croton on Hudson, NY, United States","Croton, OH, United States","Crotone, CA, Italy"]
HTML:
<p>After you enter <strong>at least three characters</strong> the autocomplete function will show all possible matches.</p>
<ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a specification..." data-filter-theme="b"></ul>