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

Searching through a list of elements for given string

本文关键字：字符串 搜索 元素 列表      更新时间：2023-09-26

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

<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!!!");
        }
    });
}

谢谢你抽出时间。

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

我还有另一个选择。您可以使用jquery自动完成来完成这项工作。但是，您可能不得不将html从列表元素更改为其他内容。只要通过下面的例子，这可能会有所帮助。如果这不是你想要的，不要介意。

https://jqueryui.com/autocomplete/#multiple
相关文章：