jQuery Mobile 列表过滤器的行为类似于自动完成

Question

jQuery Mobile ListView 和搜索过滤器工作起来而且看起来很棒。但是，我想更改行为，使其更像自动完成控件，即在输入搜索过滤器之前不会显示列表项。

我见过其他人使用 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" 添加 class 属性)

<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>