jquery mobile中的listview搜索 基础知识

jquery mobile中的listview搜索 基础知识,jquery,listview,jquery-mobile,Jquery,Listview,Jquery Mobile,这里是ABC DEF DEF不是ABC 比如说, 搜索“ABC”,结果是ABC和DEF 但是我不想搜索标签,只搜索标签 怎么做。嗯。。。这是一个开始 <ul id='list' data-role='listview' data-filter='true' data-inset='false'> <li id='a1'> <h3>ABC</h3> <p>this is ABC&l

这里是ABC

  • DEF DEF不是ABC

  • 比如说,

    搜索“ABC”,结果是ABC和DEF

    但是我不想搜索
    标签,只搜索
    标签


    怎么做。

    嗯。。。这是一个开始

        <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>
    

    更简洁的方法是

    $("#list li").each(function(){
    
        if($(this).
                  find("h3").
                  text().toUpperCase().
                  indexOf(SEARCHWORD.toUpperCase()) >=0)
           $(this).show();
        else
           $(this).hide();
    
    });
    
    从jQuery mobile:

    您可以通过定义
    $.mobile.listview.prototype.options.filterCallback
    内部绑定到回调,也可以在创建小部件后附加过滤器回调。(
    $(“#mylist”).listview('option','filterCallback',yourFunction);

    您给出的函数必须有两个参数,第一个是要搜索的任何ul的文本,第二个是要搜索的值

    在您的情况下,您只希望搜索标题部分,因此您的筛选函数应该去掉标题标记之后的所有内容,然后对其余部分应用搜索

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

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

    var searchHeader = function(text, search) {
        // Strip out extra tags from text
        return text.toLowerCase().indexOf( search ) === -1;
    }
    $("#list").listview('option', 'filterCallback', searchHeader);
    
    
    
    
    <li data-filtertext="ABC"><a href="#">Apple</a></li>
    <li data-filtertext="DEF"><a href="#">United States</a></li>