поиск по списку в jquery mobile

Question

    <ul id='list' data-role='listview' data-filter='true' data-inset='false'>
    <li id='a1'>
        <h3>ABC</h3>
        <p>this is ABC</p>
    </li>
    <li id='a2'>
        <h3>DEF</h3>
        <p>DEF is not ABC</p>
    </li>
</ul>

например,

поиск 'ABC', результат - ABC и DEF.

но я не хочу искать <p> тег, искать только <h3> тег.

как это сделать.

Answer 1

Ну ... вот начало ...

$("#list li").each(function(){

    if($(this).
              find("h3").
              text().toUpperCase().
              indexOf(SEARCHWORD.toUpperCase()) >=0)
       $(this).show();
    else
       $(this).hide();

});

См. Демонстрацию

Answer 2

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

<li data-filtertext="ABC"><a href="#">Apple</a></li>
<li data-filtertext="DEF"><a href="#">United States</a></li>

Answer 3

С мобильного jQuery документы :

Вы можете либо привязать к обратному вызову внутренне, определив $.mobile.listview.prototype.options.filterCallback, либо прикрепив обратный вызов фильтра после создания виджета.($("#mylist").listview('option', 'filterCallback', yourFunction);)

Функция, которую вы даете, должна принимать 2 аргумента, первый из которых - текст любого из ищущих ul, а второй - искомое значение.

InВ вашем случае вы хотите выполнять поиск только в части заголовка, поэтому ваша функция фильтра должна удалить все после тега заголовка, а затем применить поиск к остатку.

var searchHeader = function(text, search) {
    // Strip out extra tags from text
    return text.toLowerCase().indexOf( search ) === -1;
}
$("#list").listview('option', 'filterCallback', searchHeader);

Answer 4

Более кратким способом будет, например,

$('#list li h3').each(function(){
    alert($(this).html().search('ABC') == 0 )
});