jquery mobile中的listview搜索

Posted 2023-05-09

【中文标题】jquery mobile中的listview搜索

【英文标题】：listview search in jquery mobile

【发布时间】：2011-11-20 00:35:36

【问题描述】：

    <ul id='list' data-role='listview' data-filter='true' data-inset='false'>
    <li id='a1'>
        <h3>ABC</h3>
        <p>this is ABC</p>
    </li>
    <li id='a2'>
        <h3>DEF</h3>
        <p>DEF is not ABC</p>
    </li>
</ul>

例如，

搜索“ABC”，结果为 ABC 和 DEF。

但我不想搜索<p>tag，只搜索<h3>tag。

怎么做。

【参考方案1】：

嗯...这是一个开始...

$("#list li").each(function()

    if($(this).
              find("h3").
              text().toUpperCase().
              indexOf(SEARCHWORD.toUpperCase()) >=0)
       $(this).show();
    else
       $(this).hide();

);

See a Demo

【参考方案2】：

来自 jQuery 手机 docs:

您可以通过定义$.mobile.listview.prototype.options.filterCallback 在内部绑定到回调，或者在制作小部件后附加过滤器回调。 ($("#mylist").listview('option', 'filterCallback', yourFunction);)

你给的函数必须有 2 个参数，第一个是要搜索的任何 ul 的文本，第二个是要搜索的值。

在您的情况下，您只想搜索标题部分，因此您的过滤器功能应该删除标题标记之后的所有内容，然后对其余部分应用搜索。

var searchHeader = function(text, search) 
    // Strip out extra tags from text
    return text.toLowerCase().indexOf( search ) === -1;

$("#list").listview('option', 'filterCallback', searchHeader);

【参考方案3】：

为自定义搜索添加以下数据属性。这是最简单的方法。

<li data-filtertext="ABC"><a href="#">Apple</a></li>
<li data-filtertext="DEF"><a href="#">United States</a></li>

【参考方案4】：

更简洁的方式是例如

$('#list li h3').each(function()
    alert($(this).html().search('ABC') == 0 )
);