如何根据输入字段过滤列表？

我有一个带有基本搜索栏的JSF 2.0应用程序，其中有一个在keyup上更新的联系人列表，因此只显示与搜索栏中的文本相匹配的值。如何根据输入字段过滤列表？

<h:panelGroup id="contacts_tab_contacts_list"> 
    <h:form id="search_bar_form"> 
     <h:panelGroup id="contacts_tab_search_bar"> 
      <h:inputText id="search_bar_text"/> 
     </h:panelGroup> 
    </h:form> 
    <c:forEach items="#{currentDevice.contacts}" var="contact"> 
     <li> 
      <h:panelGroup id="contact_#{contact.phoneNumber}"> 
       <h:outputText value="#{contact.phoneNumber}" /> 
      </h:panelGroup> 
     </li> 
    </c:forEach> 
</h:panelGroup>

我希望它快，所以我想用JavaScript/jQuery实现它。我是JavaScript/jQuery世界的新手，所以我可以使用一点帮助。我怎么能这样做？

来源

2011-05-22 Ben

看看这个：http://jqueryui.com/demos/autocomplete/ – JohnP 2011-05-22 08:20:18

感谢@JohnP，我期待着看看我能不能找出如何在我的项目上实现这一点（因为自动完成是一个很好的功能，但它不完全是我需要的） – Ben 2011-05-22 08:45:14

你能更具体吗？当你说你想要一个客户端解决方案时，这是否意味着数据（联系人）已经下载到页面中，你只需要正则表达式搜索它们，或者你的意思是使用ajax来做诡计？ – 2011-05-22 09:20:14

更新视图如下（添加<ul>，使用<ui:repeat>代替<c:forEach>，去掉了一些不必要<h:panelGroup> s至最小化噪声，所述<h:form>也是不必要的，因为没有什么这就需要提交到服务器端）

<input id="search" /> 
<ul id="contacts"> 
    <ui:repeat value="#{currentDevice.contacts}" var="contact"> 
     <li>#{contact.phoneNumber}</li> 
    </ui:repeat> 
</ul>

而且使用这个脚本过滤列表：

$('#search').keyup(function() { 
    var $search = $(this).val(); 
    $('#contacts li').each(function() { 
     var $li = $(this); 
     if ($li.text().indexOf($search) > -1) { 
      $li.show(); 
     } else { 
      $li.hide(); 
     } 
    }); 
});

来源

2011-05-22 12:09:40 BalusC

为什么重新发明轮子RichFaces already provide this

来源

2011-05-22 08:30:33

RichFaces不使用服务器端解决方案吗？ – Ben 2011-05-22 08:39:49

是的。那么[这个jQuery插件]怎么样（http://gregweber.info/projects/uitablefilter – 2011-05-22 08:43:01

如何根据输入字段过滤列表？

回答

相关问题