jQuery Mobile列表过滤器的行为类似于自动完成 [英] jQuery Mobile List Filter Behave Like Auto-complete

问题描述

jQuery Mobile列表视图和搜索过滤器可以正常工作，并且看起来很棒.但是，我想将行为更改为更类似于自动完成控件，即，列表项只有在输入搜索过滤器后才会出现.

The jQuery Mobile listview and search filter works and looks great. However, I would like to change the behavior to behave more like an auto-complete control i.e. the list items don't appear until a search filter is entered.

我已经看到其他人使用jQuery UI自动完成功能，但是必须包含此库和额外的工作来设置结果样式似乎有点过头了.

I have seen other people using the jQuery UI auto-complete but it seems like overkill to have to include this library and extra work to style the results.

这可以用jQuery Mobile 1.0完成吗?

Can this be done with jQuery Mobile 1.0?

推荐答案

您可以尝试类似的操作

• http://jsfiddle.net/ULXbb/3/
• http://jsfiddle.net/ULXbb/5/(单击按钮)

• http://jsfiddle.net/ULXbb/3/
• http://jsfiddle.net/ULXbb/5/ (Button click)

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(需要将class属性添加到每个<li>元素class="ui-screen-hidden")

HTML (Need to add the class attribute to each <li> element 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>

这篇关于jQuery Mobile列表过滤器的行为类似于自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！