javascript - 如何在 jQuery/HTML 中具有多列的 ListView 上使用数据过滤器属性？

Question

我需要能够在我正在处理的 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 中的 ul 进行搜索目标，但我基本上遇到了同样的问题。实际元素在每个 block /列中有大约 10 个联系人。感谢您的帮助。

Answer 1

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