html - 在 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 过滤包含搜索文本的元素，而不是以搜索文本开头的元素。对于 starts with 过滤器，您需要使用可过滤小部件的 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。如果是，它获取当前列表项的文本和数据过滤器文本，并检查是否以搜索值开头。任何不以该值开头的元素都会通过返回 true 来过滤掉。

Here is a working DEMO