过滤器列表视图未正确显示答案

【问题标题】：Filter Listview Not Showing Up Properly过滤器列表视图未正确显示
【发布时间】：2013-08-10 00:24:47
【问题描述】：

我做了一个过滤的列表视图，但是它显示了两个搜索框：

我的代码：

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>

$( 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 代码（上图），两个搜索框都消失了，所以我知道它来自同一个行源。我该如何解决？

【问题讨论】：

标签： javascript jquery html mobile filter

【解决方案1】：

尝试将alert('') 添加到代码的各个部分，例如，在$.each 部分中，以确定重复发生的位置。您可以预期警报会在有问题的区域触发两次，可能是背靠背触发，或者在两次单独的迭代中触发一次。然后，一旦您找出导致重复的部分，您就可以确定是哪个事件负责并相应地修改您的代码。

【讨论】：