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

jQuery Mobile列表视图和搜索filter工作并且看起来很棒。 但是，我想将行为更改为更像自动完成控件，即在输入搜索filter之前不会显示列表项。

我见过其他人使用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="ui-screen-hidden"添加class属性class="ui-screen-hidden" ）

 
 
 
 
Acura
 
Audi
 
BMW
 
Cadillac
 
Chrysler
 
Dodge
 
Ferrari
 
Ford
 
GMC
 
Honda
 
Hyundai
 
Infiniti
 
Jeep
 
Kia
 
Lexus
 
Mini
 
Nissan
 
Porsche
 
Subaru
 
Toyota
 
Volkswagon
 
Volvo
 
 
  

Answer 2

http://jsfiddle.net/ULXbb/48/

我启用了它的选择function。 现在，您可以从列表中选择项目。 然后将其写入输入字段，并使列表隐藏。

Answer 3

看来这个解决方案不再适用于JQuerymobile 1.1.0和Jquery 1.7.2。

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

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