Javascript 在keyup上搜索数据值

因此，我在键入时需要显示具有特定文本的元素，该文本等于data value=“特定文本”。我试过几种方法，但似乎都不管用。 这是我到目前为止所拥有的

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

    var filter = $(this).val(), count = 0;
    $(".element-holder .element").each(function () {

        var current = $('.element').attr('data-name');
        if ($(".element[data-name='" + current + "']").text().search(new RegExp(filter, "i")) < 0) {
            $(this).fadeOut();
        } else {
            $(this).show();
            count++;
        }
    });

});

$（“.search”）.keyup（函数（）{
var filter=$（this）.val（），count=0；
$（“.element holder.element”）。每个（函数（）{
当前变量=$（'.element'）.attr（'data-name'）；
if（$（“.element[data name='”+current+“']”）text（）.search（新RegExp（filter，“i”））<0）{
$（this.fadeOut（）；
}否则{
$（this.show（）；
计数++；
}
});
});

这就是我需要帮助的地方；l

@编辑

这里是HTml

            <div class="element-holder ">
                        <div class="element" data-name='Adam' id='1'>
                        </div>
                        <div class="element" data-name='Eva' id='32'>
                        </div>
                        <div class="element" data-name='Sara' id='412'>
                        </div>
            </div>

---

html中有很多错误

使用的元素类的拼写错误

您没有显示搜索输入html

不同的数据属性名称

如果正在使用每个元素，请使用

$（this）

选择当前元素

检查我下面的演示

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

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

    $(".elemnet").each(function () {
       var text = $(this).html();

       if(entered !="")
       {
          if(text.indexOf(entered) > -1)
          {

            $(this).show();
          }else
          {

             $(this).hide();
          }
        }else{

          $(".elemnet").hide();
        }
    });

});

在每个

keyup

上搜索整个DOM将导致性能大幅下降缓存结果

限制

keyup

事件，仅在用户暂停键入时触发过滤器

重新使用正则表达式，而不是在循环中多次重新创建它

```

```请在下面尝试

$（“.search”）.keyup（函数（）{
var filter=$（this）.val（），count=0；
$（“.element holder.element”）。每个（函数（）{
当前变量=$（'.element'）.attr（'data-name'）；
if（$（this.text（）.search）（新的RegExp（filter，“i”））<0）{
$（this.fadeOut（）；
}否则{
$（this.show（）；
计数++；
}
});
});

如何格式化
如何编辑
在keyup上搜索数据值
您可以显示HTML吗too@YoYo好了，添加了HTMLI如果你知道如何使用
$（这个）
，正确地使用它。
HTML
中没有
“数据值”
属性，我真的不想粗鲁，但是什么id
'somedatahere'
和
'someid'
？ID必须是唯一的。。。如果你希望有人努力寻找答案，你必须在你的问题中表达你的努力……嗯，是的。我同意，我当时有点匆忙地更改了数据名和类的名称，但最终毫无意义。另外，数据名也应该有不同的值。我也检查了你的演示，但在keyup上似乎没有任何效果。我把jquery添加到了外部资源中。@Harugawa:你真的检查过我的演示吗？a型、b型或c型。请参见我的数据属性值aaaa、bbbb、ccccc。所以输入a，b或cYeah，这正是我输入的。似乎，用我自己的代码工作，但不是在网站上，奇怪。您是否只知道如何使其在我编写A或A时忽略？是的，您可以使用
toLowerCase（）
对于数据属性值和输入的值，它将更改为小写，然后您可以进行筛选。更多信息请参见
// Cache your elements before hand
var namedElements = $(".element-holder .element");

// inside your throttled keyup event handler
// Check for empty strings
var filter = (this.value || "").trim(),
    regex = new RegExp(filter, 'i');

var toShow = namedElements.filter(function(index, element) {
    var dataName = element.data("name");
    return regex.test(dataName);
});
toShow.show();

var toHide = namedElements.filter(function(index, element) {
    var dataName = element.data("name");
    return !regex.test(dataName);
});
toHide.hide();