1
即時通訊新的javascript和phonegap和IM坐在這裏一整天，並試圖解決這個問題。通過ajax過濾列表和請求數據
我有一個列表，我想過濾一些數據。在我過濾它之前，我想從服務器下載一些數據並將其添加到列表中。 （該列表是本地的，如果有人使用搜索功能，新數據也應該彈出）。
這個想法是，我用jQuery創建列表，並使用listviewbeforefilter事件從服務器下載數據並將其添加到列表中。然後，jquery應該過濾列表。
它工作正常，當我搜索2個字符的過濾器。
但是，當我搜索超過2個字符時，這不起作用。 我從服務器收到正確的數據，它將被添加到我的列表中，但我的原始列表中沒有更多的過濾。所以我看到我的原始列表+加載的數據。 也顯示console.log（「第二」），然後console.log（「第一次）。不知何故，jquery/phonegap跳過。然後回到它。
我試圖把3第二個console.log下面是$ ul.html（content）; $ ul.listview（「refresh」）; $ ul.trigger（「updatelayout」）;），然後我的本地數據的過濾器工作，但是服務器不會被顯示
我希望有人能幫助我解決這個奇怪的問題
我的繼承人爲listviewbeforefilter事件代碼：。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<title>Listview Autocomplete - jQuery Mobile Demos</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
<script src="cordova.js"></script>
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<script>
$(document).on("pageinit", "#myPage", function() {
$("#autocomplete").on("listviewbeforefilter", function (e, data) {
// this is a second list which is a backup. It is needed because after each search the original list is flooded with old entries.
var content = document.getElementById("autocomplete2").innerHTML;
var requestdata = "";
var $ul = $(this);
$input = $(data.input),
value = $input.val();
// ajax call returns cities with at least 3 characters
if (value && value.length > 2) {
$.ajax({
url: "http://gd.geobytes.com/AutoCompleteCity",
dataType: "jsonp",
crossDomain: true,
data: {
q: $input.val()
}
})
// The response is saved in html which i append to the original content
.then(function (response) {
var html = "";
console.log("first");
$.each(response, function (i, val) {
html += "<li>" + val + "</li>";
});
content = content + html;
$ul.html(content);
$ul.listview("refresh");
$ul.trigger("updatelayout");
});
console.log("second");
}
});
});
</script>
，這是身體與列表：
</head>
<body>
<div data-role="page" id="myPage">
<div data-role="header" data-theme="f">
<h1>Listview </h1>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<ul id = "autocomplete" data-role="listview" data-filter="true" data-filter-placeholder="Search people..." data-filter-theme="d"data-theme="d" data-divider-theme="d">
<li data-role="list-divider">A</li>
<li><a href="index.html">Adam Kinkaid</a></li>
<li><a href="index.html">Alex Wickerham</a></li>
<li><a href="index.html">Avery Johnson</a></li>
</ul>
</div><!--/content-primary -->
</div><!-- /content -->
<script type="text/javascript" charset="utf-8">
$(function(){
$("#autocomplete2").hide();
});
</script>
<ul id = "autocomplete2" data-role="listview" data-filter-theme="d"data-theme="d" data-divider-theme="d">
<li data-role="list-divider">A</li>
<li><a href="index.html">Adam Kinkaid</a></li>
<li><a href="index.html">Alex Wickerham</a></li>
<li><a href="index.html">Avery Johnson</a></li>
</ul>
</div><!-- /page -->
</body>
</html>