Question

我有一个搜索框：

<input id="box" type="text" />

我在列表中搜索：

<ons-list class="ng-scope list ons-list-inner">

  <ons-list-item data-alt-name="Granny Smith" class="list__item">Apple</ons-list-item>

  <ons-list-item data-alt-name="Valencia" class="list__item">Orange</ons-list-item>

  <ons-list-item data-alt-name="Hokkaido" class="list__item">Melon</ons-list-item>

</ons-list>

使用：

$('#box').keyup(function() {
                  var valThis = $(this).val().toLowerCase();
                  if (valThis == "") {
                    $('.list > .list__item').show();
                  } else {
                    $('.list > .list__item').each(function() {
                      var text = $(this).text().toLowerCase();
                      if (text.indexOf(valThis) >= 0) {
                        $(this).show()
                      } else {
                        $(this).hide();
                      }
                    });
                  };
                });

问题是，它只搜索.text()，但我希望它也搜索data-alt-name，以便它显示它是否与它们匹配。我已经尝试使用$(this).attr("data-alt-name")，但出于某种原因，它无效。

非常感谢任何帮助或提示：）

Answer 1

以下是使用$(this).data("alt-name")

的工作代码段

$('#box').keyup(function() {
  var valThis = $(this).val().toLowerCase();
  if (valThis == "") {
    $('.list > .list__item').show();
  } else {
    $('.list > .list__item').each(function() {
      var text = ($(this).text() + $(this).data("alt-name")).toLowerCase();
      if (text.indexOf(valThis) >= 0) {
        $(this).show()
      } else {
        $(this).hide();
      }
    });
  };
});

.list__item {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="box" type="text" />

<ons-list class="ng-scope list ons-list-inner">

  <ons-list-item data-alt-name="Granny Smith" class="list__item">Apple</ons-list-item>

  <ons-list-item data-alt-name="Valencia" class="list__item">Orange</ons-list-item>

  <ons-list-item data-alt-name="Hokkaido" class="list__item">Melon</ons-list-item>

</ons-list>

Answer 2

您可以使用：

而不是显示/隐藏

.toggle( display )：其中display可以为true以显示元素，false为false以隐藏它。

您可以更改：

var text = $(this).text().toLowerCase();
if (text.indexOf(valThis) >= 0) {
   $(this).show()
} else {
   $(this).hide();
}

使用：

var text = ($(this).text().toLowerCase() + 
          $(this).data('altName')).toLocaleLowerCase();
$(this).toggle(text.indexOf(valThis) != -1);

＆＃13;

$('#box').on('input', function(e) {
  var valThis = $(this).val().toLowerCase();
  if (valThis == "") {
      $('.list > .list__item').show();
  } else {
      $('.list > .list__item').each(function() {
          var text = ($(this).text().toLowerCase() + $(this).data('altName')).toLocaleLowerCase();
          $(this).toggle(text.indexOf(valThis) != -1);
      });
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input id="box" type="text" />
<ons-list class="ng-scope list ons-list-inner">

    <ons-list-item data-alt-name="Granny Smith" class="list__item">Apple</ons-list-item>

    <ons-list-item data-alt-name="Valencia" class="list__item">Orange</ons-list-item>

    <ons-list-item data-alt-name="Hokkaido" class="list__item">Melon</ons-list-item>

</ons-list>

＆＃13;

Answer 3

尝试使用data()方法：

$(this).data("alt-name")

这与数据属性完美配合，并将返回辅助值以执行搜索。

Answer 4

您也可以尝试使用

this.attributes["data-alt-name"].value

这也将提高性能

Answer 5

在您的情况下，另一个简单的解决方案是搜索外部HTML

var text = $(this)[0].outerHTML

Answer 6

通过文字选择是令人不快的。我退后一步，在绑定keyup处理程序之前，创建一个包含所需文本的新data-属性。

var els = $(".list > .list__item").text(function(i, txt) {
  this.setAttribute("data-text", txt.trim().toLowerCase());
  this.setAttribute("data-alt-name", this.dataset.altName.toLowerCase());
  return txt;
});

然后你可以干净利用选择引擎。

$('#box').keyup(function() {
  var valThis = this.value.trim().toLowerCase();

  if (valThis == "") {
    els.show();
  } else {
    els.hide()
      .filter(`[data-text*='${valThis}'], [data-alt-name*='${valThis}']`)
      .show();
  };
});

完整演示：

＆＃13;

var els = $(".list > .list__item").text(function(i, txt) {
  this.setAttribute("data-text", txt.trim().toLowerCase());
  this.setAttribute("data-alt-name", this.dataset.altName.toLowerCase());
  return txt;
});

$('#box').keyup(function() {
  var valThis = this.value.trim().toLowerCase();

  if (valThis == "") {
    els.show();
  } else {
    els.hide()
      .filter(`[data-text*='${valThis}'], [data-alt-name*='${valThis}']`)
      .show();
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="box" type="text" />

<ons-list class="ng-scope list ons-list-inner">
  <ons-list-item data-alt-name="Granny Smith" class="list__item">Apple</ons-list-item>
  <ons-list-item data-alt-name="Valencia" class="list__item">Orange</ons-list-item>
  <ons-list-item data-alt-name="Hokkaido" class="list__item">Melon</ons-list-item>
</ons-list>

＆＃13;

使用jQuery搜索.text（）和data-属性

6 个答案: