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