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

我有一个显示在屏幕上的记录列表，电子邮件记录是可选的，所以我用户可以看到该记录的更多细节。搜索给定字符串的元素列表

<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

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

回答

相关问题