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（需要将class属性添加到每个<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。

列表中的条目不会出现，除非您按键盘上的删除键清除过滤器框时它们也不会消失...

编辑：我找到了一个很好的解决方案，可以在此网站上自动完成工作：http://www.andymatthews.net/read/2012/03/27/jQuery-Mobile-Autocomplete-now-available

jQuery Mobile List Filter表现得像自动完成

3 个答案: