搜索給定字符串的元素列表

我有一個顯示在屏幕上的記錄列表，電子郵件記錄是可選的，所以我用戶可以看到該記錄的更多細節。搜索給定字符串的元素列表

<ul> 
    <li data-email="[email protected]">Dave</li> 
    <li data-email="[email protected]">Jess</li> 
    <li data-email="[email protected]">Jay</li> 
    <li data-email="[email protected]">Mary</li> 
    <li data-email="[email protected]">James</li> 
</ul>

請注意，這個數據只是由當場，我大概應該用更好的電子郵件地址....

我有這個頁面，允許用戶鍵入一個搜索框在搜索字符串中，我希望我的應用程序通過此列表搜索記錄，並在名稱和電子郵件地址中查找輸入字符串的任何實例。

我有一個函數，當用戶輸入一個搜索字符串，但無法找出搜索這些記錄的最佳方法時觸發。我可以實現這個使用AJAX調用一個PHP文件，只會運行一個jQuery的搜索刺痛，但我想嘗試做的事情在客戶端。

那麼有誰知道在Javascript/JQuery中做這件事的一個好方法，還是僅僅做Mysql查詢會更好？

這是JS代碼我有，這種調用方法來搜索：

var wait = setTimeout(search, 800, search_string, $user_list); 
$(this).data('timer', wait);

搜索方法：

function search(search_string, $user_list) { 

    $user_list.find("li").each(function() { 

     var $this = $(this); 
     var regex = new RegExp(search_string); 


     if ($this.text().match(regex) || 
      $this.data('email').match(regex)) { 

      console.log("Match Found!!!"); 

     } 
    }); 
}

感謝您的時間。

來源

2015-04-02 ragebunny

使用jQuery：

$('ul li').each(function() { 
    var $this = $(this); 
    var regex = new RegExp(searchTerm); 
    var email = $this.data('email') 
    if ((email && email.match(regex)) || 
     $this.text().match(regex)) { 
     // found li with search term 
    } 
});

來源

2015-04-02 10:19:13 jcubic

出於某種原因，它不喜歡這個部分「 $ this.data（‘電子郵件’）匹配（正則表達式）」，它給我的錯誤「遺漏的類型錯誤：無法讀取屬性‘匹配’的未定義」然而if語句的其他部分（查看文本）工作得很好。任何想法爲什麼？ – ragebunny 2015-04-02 11:27:54

@ragebunny你在頁面上有多一個ul嗎？如果是這樣，你需要添加id或類，並在jQuery選擇器中使用它。 – jcubic 2015-04-02 11:32:10

是的，但我使用「$ user_list.find（」li「）。each（function（）{}）」而不是使用「ul li」。這是錯的嗎？ – ragebunny 2015-04-02 12:32:03

我對你的另一個選擇。你可以使用jquery自動完成來完成這件事。但可能有必要將html元素從列表元素更改爲其他元素。只需通過下面的示例，這可能會有所幫助。沒關係，如果這不是你想要的。

https://jqueryui.com/autocomplete/#multiple

來源

2015-04-02 13:59:28 chetank

搜索給定字符串的元素列表

回答

相關問題