jQuery Mobile List Filter ведет себя как автозаполнение

Question

JQuery Mobile просмотр списка и фильтр поиска работает и выглядит великолепно.Однако я хотел бы изменить поведение так, чтобы оно больше походило на элемент автозаполнения, т.е. элементы списка не отображаются до тех пор, пока не будет введен поисковый фильтр.

Я видел других людей, использующих автоматический интерфейс jQuery UI.завершено, но кажется излишним включать эту библиотеку и дополнительную работу для стилизации результатов.

Можно ли это сделать с помощью jQuery Mobile 1.0?

Answer 1

Вы можете попробовать что-то вроде этого

• http://jsfiddle.net/ULXbb/3/
• http://jsfiddle.net/ULXbb/5/ (нажатие кнопки)

JS

$("input[data-type='search']").keyup(function() {
    if($(this).val() == '') {
        $("ul:jqmData(role='listview')").children().addClass('ui-screen-hidden');
    }
});

$('a.ui-input-clear').click(function() {
    $("input[data-type='search']").val('');
    $("input[data-type='search']").trigger('keyup');
});

HTML (необходимо добавить атрибут класса к каждому <li> элементу class="ui-screen-hidden")

<div data-role="page" id="filterMe">
    <div data-role="content">
        <ul data-role="listview" data-filter="true">
            <li class="ui-screen-hidden"><a href="#">Acura</a></li>
            <li class="ui-screen-hidden"><a href="#">Audi</a></li>
            <li class="ui-screen-hidden"><a href="#">BMW</a></li>
            <li class="ui-screen-hidden"><a href="#">Cadillac</a></li>
            <li class="ui-screen-hidden"><a href="#">Chrysler</a></li>
            <li class="ui-screen-hidden"><a href="#">Dodge</a></li>
            <li class="ui-screen-hidden"><a href="#">Ferrari</a></li>
            <li class="ui-screen-hidden"><a href="#">Ford</a></li>
            <li class="ui-screen-hidden"><a href="#">GMC</a></li>
            <li class="ui-screen-hidden"><a href="#">Honda</a></li>
            <li class="ui-screen-hidden"><a href="#">Hyundai</a></li>
            <li class="ui-screen-hidden"><a href="#">Infiniti</a></li>
            <li class="ui-screen-hidden"><a href="#">Jeep</a></li>
            <li class="ui-screen-hidden"><a href="#">Kia</a></li>
            <li class="ui-screen-hidden"><a href="#">Lexus</a></li>
            <li class="ui-screen-hidden"><a href="#">Mini</a></li>
            <li class="ui-screen-hidden"><a href="#">Nissan</a></li>
            <li class="ui-screen-hidden"><a href="#">Porsche</a></li>
            <li class="ui-screen-hidden"><a href="#">Subaru</a></li>
            <li class="ui-screen-hidden"><a href="#">Toyota</a></li>
            <li class="ui-screen-hidden"><a href="#">Volkswagon</a></li>
            <li class="ui-screen-hidden"><a href="#">Volvo</a></li>
        </ul>
    </div>
</div>

Answer 2

http://jsfiddle.net/ULXbb/48/

Я включил функцию выбора.Теперь вы можете выбирать предметы из списка.который затем записывается в поле ввода и список становится скрытым.

Answer 3

Похоже, что это решение больше не работает с JQuerymobile 1.1.0 и Jquery 1.7.2.

Записи из списка не отображаются, пока вы не нажмете кнопку «Удалить» на клавиатуре, и они не исчезнут при очистке поля фильтра…

edit: я нашел отличное решение для автозаполненияработа на сайте: http://www.andymatthews.net/read/2012/03/27/jQuery-Mobile-Autocomplete-now-available