如何在 jQuery/HTML 中有多个列的列表视图上使用数据过滤器属性？答案

【问题标题】：How can I use a data-filter attribute on a listview that has multiple columns in jQuery/HTML?如何在 jQuery/HTML 中有多个列的列表视图上使用数据过滤器属性？
【发布时间】：2016-12-11 10:56:43
【问题描述】：

我需要能够在我正在处理的 jQuery Mobile 网站中搜索联系人列表。格式为联系人图片下方的联系人姓名，有两列联系人，ui-block-a和ui-block-b，如下：

    <div data-role="content" data-theme="c" class="ui-grid-b">      
        <ul data-role="listview" data-filter="true" data-inset="false">
        <div class="ui-block-a">
            <ul>
                <li>
                    <a href="tel:0123456789"><img src="images/personMale.png" width="100"></a>
                    <p><b>Bar, Foo</b></p>
                </li>                       
                <li>
                    <a href="tel:0123456789"><img src="images/personMale.png" width="100"></a>
                    <p><b>Santor, George</b></p>
                </li>
            </ul>
        </div>
        <div class="ui-block-b">
            <ul>
                <li>
                    <a href="tel:0123456789"><img src="images/personMale.png" width="100"></a>
                    <p><b>Sebastian, John</b></p>
                </li>
                <li>
                    <a href="tel:0123456789"><img src="images/personMale.png" width="100"></a>
                    <p><b>Foo, Bar </b></p>
                </li>
            </ul>
        </div>
      </ul>  
    </div>

目前，当您搜索特定姓名时，它不会只显示一个联系人，而是会显示其所在的列 - ui-block-a 或 ui-block-b。 Here's an example of it happening in jsfiddle。我尝试了一种更手动的javascript方法，ui-block-a 和ui-block-b 内部的uls 是搜索目标，但我基本上遇到了同样的问题。实际项目在每个块/列中大约有 10 个联系人。任何帮助表示赞赏。

【问题讨论】：

标签： javascript android jquery html css

【解决方案1】：

我通过将每个联系人放入它自己的ui-block-a 和ui-block-b 来解决了这个问题。轻微的格式问题，但没有一点 CSS 解决不了。 Here's the updated jsfiddle.

【讨论】：