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

jQuery Mobile listview和搜索过滤器工作正常，看起来很棒。但是，我想将该行为更改为更像自动完成控件的行为，即在输入搜索筛选器之前，列表项不会显示

我见过其他人使用jQueryUIAutoComplete，但要包含这个库和额外的工作来设置结果样式，似乎有些过分了

---

使用jQuery Mobile 1.0可以做到这一点吗？

您可以尝试类似的方法

• （点击按钮）

JS

HTML（需要将class属性添加到每个

元素

class=“ui screen hidden”

）

---

我已启用其选择功能。现在，您可以从列表中选择项目。然后将其写入输入字段，列表被隐藏

这个解决方案似乎不再适用于JQuerymobile 1.1.0和jQuery1.7.2

除非您按键盘上的delete键，否则列表中的条目不会显示，也不会在清除筛选框时消失

---

编辑：我找到了一个很好的解决方案，可以让自动完成在这个网站上工作：

谢谢，工作很好，但我们还需要处理被按下的明文按钮。我已经用代码更新了我的问题。也许有编辑权限的人可以将两者合并。我还添加了按钮单击功能这在JQM 1.1.0中不再有效。我已经报告了这个问题，他们现在正在研究如何在jQuery Mobile 1.0.0中实现这一点。我必须更改jQuery.Mobile-1.1.0.js。我删除了第5818行的

if

语句，并将其替换为

listItems=list.children（）
$("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');
});

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