javascript - 在元素列表中搜索给定字符串

Question

我在屏幕上显示了一个记录列表，可以选择电子邮件记录，以便用户可以查看该记录的更多详细信息。

<ul>
    <li data-email="test@test.com">Dave</li>
    <li data-email="test1@test.com">Jess</li>
    <li data-email="test2@test.com">Jay</li>
    <li data-email="test3@test.com">Mary</li>
    <li data-email="test4@test.com">James</li>
</ul>

请注意，这些数据只是当场编造的，我可能应该使用更好的电子邮件地址......

我在此页面上有一个搜索框，允许用户输入搜索字符串，我希望我的应用程序搜索此记录列表并查找姓名和电子邮件地址中输入字符串的任何实例。

我有一个函数，当用户输入搜索字符串但无法找出搜索这些记录的最佳方式时触发。我可以使用对 php 文件的 AJAX 调用来实现此目的，该文件只需使用该搜索字符串运行 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!!!");

        }
    });
}

感谢您抽出时间。

Answer 1

使用 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
   }
});