Question

假设我有一些像这样的元素

<div class="friendListItem" data-user-name="Andi">Andi<div>
<div class="friendListItem" data-user-name="John">John<div>
<div class="friendListItem" data-user-name="Anderson">Anderson<div>
<div class="friendListItem" data-user-name="John Smith">John Smith<div>
<div class="friendListItem" data-user-name="George">George<div>

我正在尝试使用正则表达式创建搜索功能，它将根据数据用户名文本匹配显示元素。例如，我希望当用户在jQuery中键入nd以捕获Andi和Anderson html元素时，

当他们输入约翰＆＃39;同时捕获John和John Smith元素，

当他们输入约翰史密斯＆＃39;仅显示John Smith元素。

到目前为止，我已经提出了这个

$('#inputSearchFriends').on('input', function () {
    const searchText = this.value.trim();
    $('.friendListItem').filter(function() {
        const re = new RegExp(searchText);
        return this.attributes['data-user-name'].value.match(re);
    }).show();
}

但它只在完全输入文本时返回元素。我还需要正则表达式模式不区分大小写，所以如果我键入＆＃39; john＆＃39;它仍将匹配约翰＆＃39;。我该怎么办？

Answer 1

我使用简单的indexOf()，因为它比正则表达式方法更快，为比较降低了所有内容。演示可能看起来有点奇怪，因为它首先隐藏了一切，但你明白了：

＆＃13;

$('#inputSearchFriends').on('input', function () {
    const searchText = this.value.trim();
    $('.friendListItem').hide();
    $('.friendListItem').filter(function() {
        return this.attributes['data-user-name'].value.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
    }).show();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="friendListItem" data-user-name="Andi">Andi</div>
<div class="friendListItem" data-user-name="John">John</div>
<div class="friendListItem" data-user-name="Anderson">Anderson</div>
<div class="friendListItem" data-user-name="John Smith">John Smith</div>
<div class="friendListItem" data-user-name="George">George</div>
<input id="inputSearchFriends">

＆＃13;

Answer 2

尝试更改此行：

const re = new RegExp(searchText);

要：

const re = new RegExp(searchText,'gi');

JQuery - 使用给定的正则表达式搜索元素值

2 个答案: