如何根據輸入字段過濾列表？

我有一個帶有基本搜索欄的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

如何根據輸入字段過濾列表？

回答

相關問題