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>

请注意，这些数据刚刚在现场制作，我可能应该使用更好的电子邮件地址....

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

我有一个功能，当用户输入搜索字符串时会触发，但无法找出搜索这些记录的最佳方法。我可以实现这个使用AJAX调用一个php文件，它只会运行一个jquery与该搜索sting但我想尝试在客户端的事情上做。

所以有人知道在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
   }
});

Answer 2

我还有另一种选择。您可以使用jquery自动完成功能来完成此操作。但是可能有一个机会你必须将html从列表元素更改为其他东西。只需通过以下示例，这可能会有所帮助。不要紧，这不是你想要的。

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

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

2 个答案: