在Jquery mobile中创建可过滤元素时出错

Question

我使用Jquery Mobile

为可过滤元素做了一个程序

在搜索框中搜索特定字符时，它会显示所有字符和名称，而不是我搜索过的特定字符

我得到的输出是

**Here is my coding**

<link rel="stylesheet" href="../css/jquery.mobile-1.4.3.min.css">
<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/jquery-ui.js"></script>
<script src="../js/jquery.mobile-1.4.3.min.js"></script>


<div data-role="page" id="pageone">
<div data-role="header">
<h1> Names </h1>
</div>
<div data-role="main" class="ui-content">
<form class="ui-filterable">


<input id="myFilter" data-type="search"  placeholder="Please type here">
</form>
<ul data-role="listview" data-filter="true" data-input="#myFilter" data-
autodividers="true" data-inset="true">
<li data-filtertext="hello"><a href="#">Abdul</a></li>
<li><a href="#">Alvin</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Balmer</a></li>
<li><a href="#">Nixon</a></li>
<li><a href="#">Mitchelle</a></li>
<li><a href="#">william</a></li>
<li><a href="#">vincent</a></li>
<li><a href="#">domney</a></li>
<li><a href="#">Brad</a></li>
<li><a href="#">Tarvin</a></li>
<li><a href="#">Pamela</a></li>
<li><a href="#">Jenney</a></li>
<li><a href="#">Rose</a></li>
<li><a href="#">Pepe</a></li>
<li><a href="#">Ronaldo</a></li>
<li><a href="#">Messi</a></li>
<li><a href="#">Kroos</a></li>
<li><a href="#">Klose</a></li>
<li><a href="#">Neymar</a></li>
<li><a href="#">Fabrigas</a></li>
<li><a href="#">Iniesta</a></li>
<li><a href="#">Cavani</a></li>
<li><a href="#">Silva</a></li>
<li><a href="#">Beckham</a></li>
</ul>
</div>
</div>

Answer 1

默认情况下，jQM会过滤包含搜索文本的项目，而不是以搜索文本开头的项目。对于使用过滤器启动，您需要使用可过滤小部件的 filterCallback 选项：

$(document).on("pagecreate", "#pageone", function(){        
    $("#myList").filterable('option', 'filterCallback', startsWithSearch);    
});

function startsWithSearch( idx, searchValue ) {
    if (searchValue && searchValue.length > 0){
        var theListItems = $("#myList li");
        var text = theListItems.eq(idx).text().toLowerCase();
        var filttext = theListItems.eq(idx).data("filtertext") || '';
        filttext = filttext.toLowerCase();

        //if either text or filtertext starts with searchvalue, return false
        if( text.lastIndexOf(searchValue, 0) === 0 || filttext.lastIndexOf(searchValue, 0) === 0){
            return false;
        } else { 
            return true; //filter this one out
        }
    } else {
        return false;
    }
}

在pagecreate上我将filterCallback选项设置为名为startsWithSearch的javascript函数。该功能可以查看是否已输入searchValue。如果是这样，它将获取当前listitem的text和data-filtertext，并检查是否以searchValue开头。任何不以该值开头的项目都会通过返回true来过滤掉。

  

以下是 DEMO