Question

所以，我在输入时需要显示具有某些文本的元素，这些文本等于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++;
        }
    });

});

这是我需要帮助的; l

@Edit

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>

Answer 1

请尝试以下

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="search"/>
 <div class="element-holder ">
<div class="element" data-name='Adam' id='1'>How to Format
</div>
<div class="element" data-name='Eva' id='32'>How to Edit
</div>
<div class="element" data-name='Sara' id='412'>Searching throught data-value on keyup
</div>
</div>

Answer 2

你的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();
        }
    });

});

<强> Working Demo

<强> Demo using data attribute

Answer 3

在每个keyup上搜索整个DOM会导致性能下降。 缓存结果
限制您的keyup事件仅在用户暂停键入
重新使用正则表达式，而不是在循环中多次重复创建

```

// 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();

```

在keyup上搜索数据值

3 个答案: