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

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

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

Код, который я пытался, это here.

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

источник

2012-01-13 Pablo

Ваш пример работает для меня, нажата 'b', а разделитель 'aaaa' удален –

Это потому, что второй делитель содержит элемент, который содержит букву 'b', но не потому, что текст разделителя включает это письмо. Попробуйте найти «bbbb». Я бы хотел, чтобы разделитель появился в этом случае. – Pablo

Могу я спросить, зачем вам это нужно? Делитель используется для группировки, не отображающей результат. IMHO –

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

http://jsfiddle.net/DCkDp/24/

$("#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>

источник

2012-01-16 18:54:01

Спасибо большое! Я сделал только небольшое изменение и вместо selector '$ (" li [data-groupoptions = "+ searchValue.toLowerCase() +"] ")' Я использовал '$ (" li [data-groupoptions * = "+ searchValue. toLowerCase() + "]") ', поэтому конкретная группа также появится при поиске части ее имени. Обновлено здесь: http://jsfiddle.net/DCkDp/25/ – Pablo

Еще лучше +1 за хороший вопрос из коробки.Сначала я не понимал практического применения, но теперь мне это действительно нравится –

Единственная проблема, которую я вижу, что она не является общей, поэтому она не будет хорошо играть с KnockoutJS из коробки – Adaptabi

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

<li> 
    <a> 
     <p>Item</p> 
     <p style='display:none;'><?php echo $my_divider; ?></p> 
    </a> 
</li>

источник

2012-05-18 14:33:00 Tikal

Это своего рода раздувание – Adaptabi

Литтл улучшение по сравнению с Phill Pafford ответа, чтобы соответствовать имена незавершенные разделители: изменить:

$("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/

источник

2013-03-05 03:42:34

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

ответ

Смежные вопросы