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

Question

I need to be able to search through a list of contacts in a jQuery Mobile site that I'm working on. It's formatted with the contacts name underneath the contacts image, and there are two columns of contacts, ui-block-a , and ui-block-b , as such:

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

Currently, when you search for a specific name, instead of showing only the one contact, it shows the column that it's in- either ui-block-a or ui-block-b . Here's an example of it happening in jsfiddle . I've tried a more manual javascript approach with the ul s inside of ui-block-a and ui-block-b being the search target, but I basically run into the same problem. The actual project has around 10 contacts in each block/column. Any help is appreciated.

Answer 1

I solved the issue by putting each contact into it's own ui-block-a and ui-block-b . Minor formatting issues, but nothing a little CSS won't fix. Here's the updated jsfiddle.