jquerymobile повторной фильтрации - PullRequest
Новая
       2

jquerymobile повторной фильтрации

1 голос
/ 09 февраля 2012

Я использую jquerymobile.И в списке у меня есть фильтр.Когда пользователь что-то вводит, он отлично фильтруется.Однако, когда я добавляю больше элементов в список, фильтрация не обновляется.

Есть идеи, как я могу обновить фильтрацию?(повторно отфильтровать список?)

Спасибо

Ответы [ 4 ]

5 голосов
/ 09 февраля 2012

Инициировать событие изменения в поле ввода поиска, например, после добавления элементов в список. 

$(".ui-input-search .ui-input-text").trigger("change");

Образец: 

<html>
<head>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
       $("#btn").live("click",function(){
            $("#list").append("<li><a href='#'>100</a></li><li><a href='#'>200</a></li><li><a href='#'>400</a></li><li><a href='#'>500</a></li><li><a href='#'>1000</a></li>");
            $("#list").listview("refresh");
            $("#page").trigger("create");
            $(".ui-input-search .ui-input-text").trigger("change");
       });
</script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

</head>

<body>
<div id="page" data-role="page">
<div data-role="header">
    <h1>Test Page</h1>
</div>
<div data-role="content"> 
    <ul id="list" data-role="listview" data-inset="true" data-filter="true">
        <li><a href="#">1</a></li>
        <li><a href="#">12</a></li>
        <li><a href="#">41</a></li>
        <li><a href="#">8</a></li>
        <li><a href="#">91</a></li>
        <li><a href="#">65</a></li>
    </ul>
    <a data-role="button" id="btn">Add more</a>
</div>
</div><!-- /page -->
</body>

</html>

Демо - http://pastehtml.com/view/bnl7lpe3o.html

Дайте мне знать, если это поможет.

Обновление для jQuery Mobile 1.4 Поведение фильтра было выделено в виджет filterable. Вы можете обновить содержимое списка и повторно запустить фильтр одним движением: 

$( ".listselector" ).filterable( "refresh" );

Хорошим преимуществом этого является то, что элементы списка фильтруются немедленно. Вы не испытываете визуального сбоя при просмотре элементов за доли секунды до того, как они отфильтрованы, как при ручном запуске элемента управления вводом. Смотри http://api.jquerymobile.com/filterable/#method-refresh

Приведенный выше код больше не будет работать, поскольку jQuery Mobile отслеживает последний текст, введенный в фильтр, и не фильтрует, если ввод не изменился. Если вы действительно хотели запустить управление входом, вам понадобится следующий хак, чтобы сначала очистить последний введенный ввод: 

$(".ui-input-search input").attr('data-lastval', '').trigger("change");

Но, пожалуйста, используйте функцию filterable, чтобы двигаться вперед.

3 голосов
/ 09 февраля 2012

Я думаю, что проблема должна быть решена методом refresh, но я не уверен: 

$('#mylist').listview('refresh');
1 голос
/ 08 сентября 2012

После обновления представления списка добавление приведенного ниже кода обновит содержимое, чтобы оно стало видимым: 

$("#list").listview("refresh");
0 голосов
/ 12 января 2013

Помимо использования ранее упомянутого обновления списка, обратите внимание, что использование jQuery .show() в элементе списка приведет к добавлению display:block; в CSS элемента.Поскольку он имеет приоритет над классом ui-screen-hidden в jQM, он препятствует способности поискового фильтра скрывать элементы, когда они не совпадают.

Так что, если вы добавляете элементы в список с помощью .show() / .hide() комбо, используйте .css('display','') вместо .show().

Мой общий порядок добавления новых скрытых предметов: 

// 1. Clear display:none and display:block, if necessary, from the listitem
$(yourLI).css('display','');
// 2. Apply jQM formatting, such as corners and other CSS, to the entire listview
$(yourListView).listview('refresh');
// 3. Make sure the searchfilter runs on the new items without user intervention
$(".ui-input-search .ui-input-text").trigger("change");
...