Question

我有html如下：

<input type='search' name='con_msg_srch' placeholder='Search Contact'/>
<div class='contactlist'>
    <span class='_webnn'>James Oduro</span>
</div>
<div class='contactlist'>
    <span class='_webnn'>John Doe</span>
</div>
<div class='contactlist'>
    <span class='_webnn'>Opoku Elvis</span>
</div>

我编写了一个功能来搜索联系人列表联系人中的特定联系人，其联系人子项的innerHTML与搜索输入的值匹配。

如何修改 RegExp 以执行以下操作：

在搜索输入值
能够匹配aA-zZ的案例敏感性
如果用户首先输入姓氏或名字

我真的没有太多关于RegExpression的知识，这就是我需要帮助的原因

JQuery的：

$('input[name="con_msg_srch"]').keyup(function(){
    var value = $.trim($(this).val());
    var exp = new RegExp('^' + value, 'i');

    $('.contactlist').each(function() {
        var isMatch = exp.test($('._webnn', this).text());
        $(this).toggle(isMatch);
    });

});

谢谢。

Answer 1

试试这个。

$('input[name="con_msg_srch"]').keyup(function(){
    var value = $.trim($(this).val());
    var value = value.replace( /  +/g, ' ' )
    var exp = new RegExp(value, 'i');

    $('.contactlist').each(function() {
        var isMatch = exp.test($('._webnn', this).text());
        $(this).toggle(isMatch);
    });

});

Answer 2

您应该将span的innerText也作为属性值添加到span中，如下所示。

<div class='contactlist'>
    <span class='_webnn' data='James Oduro'>James Oduro</span>
</div>
<div class='contactlist'>
    <span class='_webnn' data='John Doe'>John Doe</span>
</div>
<div class='contactlist'>
    <span class='_webnn' data='Opoku Elvis'>Opoku Elvis</span>
</div>

现在，您可以根据“data”属性的值搜索范围，而不是基于HTML内容进行搜索。这将简化您的搜索逻辑。

没有必要使用属性名称“data”。您可以使用HTML标记的任何名称创建属性。

我希望这可以帮助您解决问题。

根据输入值动态搜索div

2 个答案: