我制作了一个过滤 ListView ,但它显示了两个搜索框:
我的代码:
HTML
<div data-role="page" id="searchevents">
<div data-role="header">
<h1>Search</h1>
</div>
<div data-role="content">
<ul id='searchlist' data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Search by club or event name..."></ul>
</div>
</div>
JS
$( document ).on( "pageinit", "#searchevents", function() {
$( "#searchlist" ).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({
url: "http://gd.geobytes.com/AutoCompleteCity",
dataType: "jsonp",
crossDomain: true,
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");
});
}
});
});
如果我从 HTML 代码(上面)中取出
最佳答案
尝试将 alert('')
添加到代码的各个部分,例如在 $.each
部分中,以确定重复发生的位置。您可以预期警报会在有问题的区域触发两次,可能是连续触发,或者在两次单独的迭代期间触发一次。然后,一旦找出导致重复的部分,您就可以确定哪个事件负责并相应地修改您的代码。
关于javascript - 过滤器 ListView 未正确显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18157445/