Фильтр Listview по элементам и разделителям - PullRequest
Новая
       15

Фильтр Listview по элементам и разделителям

2 голосов
/ 13 января 2012

В jQueryMobile я написал компонент data-role="listview" и хочу отфильтровать данные, включая их разделители. То есть, когда пользователь вводит некоторый текст для поиска, он может соответствовать определенным элементам или разделителям. В последнем случае должен быть показан весь разделитель и его подпункты. Проблема в том, что механизм фильтрации по умолчанию пропускает разделители, и я не знаю, как правильно переопределить функцию filterCallback.

Кто-нибудь знает, как этого добиться?

Код, который я пробовал: здесь .

Заранее спасибо.

Ответы [ 3 ]

3 голосов
/ 18 мая 2012

Для включения результатов, соответствующих тексту разделителей, я вставляю в каждую строку скрытый символ, который содержит текст разделителя. 

<li>
    <a>
        <p>Item</p>
        <p style='display:none;'><?php echo $my_divider; ?></p>
    </a>
</li>
2 голосов
/ 16 января 2012

Ну, у меня есть кое-что:

JS 

$("#myList").listview('option', 'filterCallback', function (text, searchValue) { 
    $("li[data-groupoptions]").removeClass('override-ui-screen-hidden');
    $("li[data-groupoptions="+searchValue.toLowerCase()+"]").addClass('override-ui-screen-hidden');
    return text.toLowerCase().indexOf( searchValue ) === -1;
});

CSS 

.override-ui-screen-hidden {
    display:block !important;   
}

HTML 

<div data-role="page">
    <div data-role="content">
        <ul id="myList" data-role="listview" data-filter="true">
            <li data-role="list-divider" data-groupoptions="aaaa">AAAA</li>
            <li data-groupoptions="aaaa"><a href="index.html">Adam Kinkaid</a></li>
            <li data-groupoptions="aaaa"><a href="index.html">Alex Wickerham</a></li>
            <li data-groupoptions="aaaa"><a href="index.html">Avery Johnson</a></li>
            <li data-role="list-divider" data-groupoptions="bbbb">BBBB</li>
            <li data-groupoptions="bbbb"><a href="index.html">Bob Cabot</a></li>
            <li data-role="list-divider" data-groupoptions="cccc">CCCC</li>
            <li data-groupoptions="cccc"><a href="index.html">Caleb Booth</a></li>
            <li data-groupoptions="cccc"><a href="index.html">Christopher Adams</a></li>
            <li data-groupoptions="cccc"><a href="index.html">Culver James</a></li>
        </ul>
    </div>
</div>
0 голосов
/ 05 марта 2013

Небольшое улучшение по сравнению с ответом Фила Паффорда, чтобы соответствовать неполным именам разделителей: изменить это: 

$("li[data-groupoptions="+searchValue.toLowerCase()+"]").addClass('override-ui-screen-hidden');

с этим: 

$("li[data-groupoptions*="+searchValue.toLowerCase()+"]").addClass('override-ui-screen-hidden');

Теперь вы можете сопоставить 'AAAA', просто набрав 'AA'. Попробуйте здесь: http://jsfiddle.net/qjJw3/

...