Javascript 使用Regex/jQuery匹配HTML属性（用于搜索）

我正试图在

按键上启动对图像库的搜索（或者说是筛选）。用户开始键入图像名称，任何与搜索词不匹配的图像名称都将被隐藏：

<div id="abc" data-imgName="abc"></div>
<div id="abc2" data-imgName="abc2"></div>
<div id="xyz" data-imgName="xyz"></div>



因此，如果用户开始键入“ab”，那么：
$（'#xyz'）.hide（）

我该怎么做？我可以在属性上使用正则表达式吗

//bind an event handler to the text input for the keyup event (so the value will have changed by the time this event fires)
$('input[type="text"]').on('keyup', function (event) {

    //convert the value of the text box to lowercase
    this.value = this.value.toLowerCase();

    //cache the elements that match the search
    var good_to_go = $('[data-imgName*=' + $(this).val() + ']').show();

    //hide all the elements that do not match the search
    $('[data-imgName]').not(good_to_go).hide();
});

可能有一种方法可以更好地执行此操作，但这会获取文本输入的值，并查找包含文本输入值的
data imgName
属性的所有元素。然后，它查找具有
数据imgName
属性的所有元素，并隐藏尚未找到的所有元素

如果所有搜索到的元素都有父元素，则应使用它启动所有选择器，以避免搜索整个DOM：

var $container = $('#container-id');
$('input[type="text"]').on('keyup', function (event) {
    this.value = this.value.toLowerCase();
    if (this.value == '') {
        $container.children().show();
    } else {
        var good_to_go = $container.find('[data-imgName*="' + this.value + '"]').show();
        $container.find('[data-imgName]').not(good_to_go).hide();
    }
});

请注意，此示例还检查文本框的值是否为nothing，如果为nothing，则显示所有搜索的元素

以下是
*=
（包含）选择器的文档：

以下是
.not（）
函数的文档：

下面是一个工作演示：

可能有一种方法可以更好地执行此操作，但这会获取文本输入的值，并查找包含文本输入值的
data imgName
属性的所有元素。然后，它查找具有
数据imgName
属性的所有元素，并隐藏尚未找到的所有元素

如果所有搜索到的元素都有父元素，则应使用它启动所有选择器，以避免搜索整个DOM：

var $container = $('#container-id');
$('input[type="text"]').on('keyup', function (event) {
    this.value = this.value.toLowerCase();
    if (this.value == '') {
        $container.children().show();
    } else {
        var good_to_go = $container.find('[data-imgName*="' + this.value + '"]').show();
        $container.find('[data-imgName]').not(good_to_go).hide();
    }
});

请注意，此示例还检查文本框的值是否为nothing，如果为nothing，则显示所有搜索的元素

以下是
*=
（包含）选择器的文档：

以下是
.not（）
函数的文档：

下面是一个工作演示：

编辑：我将把这个留作参考，但@Jasper的解决方案效率更高

编辑：我将此留作参考，但@Jasper的解决方案效率更高。
您必须每次循环查看所有div，然后才有可能

稍微调整一下html：

<div class="searchImg" data-imgName="abc"></div>
<div class="searchImg" data-imgName="abc2"></div>
<div class="searchImg" data-imgName="xyz"></div>

你每次都必须循环浏览你所有的div，那是可能的

稍微调整一下html：

<div class="searchImg" data-imgName="abc"></div>
<div class="searchImg" data-imgName="abc2"></div>
<div class="searchImg" data-imgName="xyz"></div>


A.
B
x


$（文档）.ready（函数（）{
$（“#搜索”）.keyup（函数（）{
var term=$（this.val（）；
$（“#image_holder”）.find（“div”）.css（“display”、“block”）；
$（“#image_holder”）。查找（“div”）。每个（函数（）{
if（$（this）.attr（“数据imgName”）.indexOf（term）<0）{
$（this.css（“显示”、“无”）；
}
});
});
});

这里有一把小提琴给你：

A.
B
x


$（文档）.ready（函数（）{
$（“#搜索”）.keyup（函数（）{
var term=$（this.val（）；
$（“#image_holder”）.find（“div”）.css（“display”、“block”）；
$（“#image_holder”）。查找（“div”）。每个（函数（）{
if（$（this）.attr（“数据imgName”）.indexOf（term）<0）{
$（this.css（“显示”、“无”）；
}
});
});
});

这里有一个提琴供您使用：
您当然可以使用正则表达式，但因为它只是基本字符和字符串的开头，为什么不使用函数来查看字符串是否以定义的字符开头？您需要正则表达式还是只需查找精确匹配即可？hi@fge。regex所以“bc”隐藏了“xyz”而不是“abc2”好吧，没必要，从你的答案来看，似乎
.indexOf（）
正好符合这个要求。当然，你可以使用regex，但因为它只是基本字符和字符串的开头，为什么不使用函数来查看字符串是否以定义的字符开头？是否需要正则表达式，或者只需查找精确匹配就足够了？hi@fge。regex使“bc”隐藏“xyz”而不是“abc2”好吧，没必要，从你的答案来看，这似乎
。indexOf（）
正好符合要求。我还建议用keyup而不是keypress进行操作。有趣的是，我刚刚做了更改，然后当文章刷新时，你的评论就在那里了，很好的评论。我也会让它
var good\u to\u go=$（'[data imgName*='+$（this.val（）+']'）.show（）
。这样，如果用户退格并且查询现在与该项匹配，隐藏项将再次显示。@anstosa一个很好的建议。我将更新代码和示例。@Jasper，这太好了！而且一分钟后会好转：）大小写不敏感度如何？（因为大多数搜索字段可能需要这样做）我也建议在keyup上而不是在keypress上这样做。有趣的是，我刚刚做了更改，然后当文章刷新时，你的评论就是，好的评论。我还建议它
var good_to_go=$（'[data imgName*='+$（this.val（）+']）。show（）
。这样，如果用户退格并且查询现在与该项匹配，隐藏项将再次显示。@anstosa是一个很好的建议。我将更新代码和示例。@Jasper，这太好了！而且一分钟比一分钟好：）大小写不敏感如何？（因为大多数搜索字段可能都需要它）
<div id="image_holder">
    <div id="abc" data-imgName="abc">a</div>
    <div id="abc2" data-imgName="abc2">b</div>
    <div id="xyz" data-imgName="xyz">x</div>
</div>

<br>

<input type="text" id="search">

<script type="text/javascript">
$(document).ready(function() {

    $("#search").keyup(function() {

        var term = $(this).val();

        $("#image_holder").find("div").css("display", "block");

        $("#image_holder").find("div").each(function() {

            if ($(this).attr("data-imgName").indexOf(term) < 0) {

                $(this).css("display", "none");

            }

        });

    });

});
</script>