메신저 자바 스크립트 및 phonegap에 새로 왔고 여기 하루 종일 여기 앉아서이 문제를 해결하려고합니다.아약스를 통해 목록을 필터링하고 데이터를 요청하는 중
목록이 있는데 일부 데이터를 필터링하고 싶습니다. 그리고 필자는 필터하기 전에 서버에서 일부 데이터를 다운로드하여 목록에 추가하려고합니다. (목록이 로컬이며 다른 사람이 검색 기능을 사용하면 새 데이터도 팝업됩니다).
아이디어는 jquery로 목록을 만들고 listviewbeforefilter-event를 사용하여 서버에서 데이터를 다운로드하고 목록에 추가하는 것입니다. 그런 다음 jquery가 목록을 필터링해야합니다.
필터가 2자를 검색 할 때 제대로 작동합니다.
하지만 2 개 이상의 문자를 검색 할 때 예상대로 작동하지 않습니다. 서버에서 올바른 데이터를 수신했지만 내 목록에 추가되지만 원래 목록에는 필터링이 더 이상 없습니다. 따라서 원본 목록과로드 된 데이터를 볼 수 있습니다. 또한 console.log ("second")가 먼저 표시되고 console.log ("first")가 표시됩니다. 어떻게 든 jquery/phonegap은 .then 부분을 건너 뛴 다음 다시 돌아옵니다. 두 번째 console.log 아래에 $ ul.listview ("refresh"); $ ul.trigger ("updatelayout");)의 로컬 데이터의 필터가 작동하지만 서버가 표시 실 거예요
나는 사람이 이상한 문제를 도와 줄 수 있기를 바랍니다을 heres 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>