Question

我有一个简单的搜索输入，可以在您键入时过滤div，以便只显示那些具有匹配数据属性的div。

这很好用，但它只返回完全匹配。例如，在下面的代码段中，我可以搜索“apple”，但“apple california”不会显示正确的div（即使data属性包含这两个值）。我想这是因为它只搜索完全匹配。

如何调整此代码以在“data-”元素中搜索多个值？理想情况下，我想让它忽略像“和”，“in”，“near”这样的常用词，以便搜索：

Apple in California 或 iphone near california

仍会显示Apple div。

感谢任何建议，我很难过！这是片段：

$('[data-search]').on('keyup', function() {
  var searchVal = $(this).val();
  var filterItems = $('[data-filter-item]');

  if (searchVal != '') {
    filterItems.addClass('hidden');
    $('[data-filter-item][data-filter-name*="' + searchVal.toLowerCase() + '"]').removeClass('hidden');
  } else {
    filterItems.removeClass('hidden');
  }
});

* {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, sans-serif;
}

.hidden {
  display: none;
}

input {
  background: #cdcdcd;
  border: none;
  padding: 14px 20px;
}

.items {
  margin-top: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="search">
    <input type="text" placeholder="search" data-search />
  </div>
  <div class="items">
    <div data-filter-item data-filter-name="apple+iphone+california">Apple</div>
    <div data-filter-item data-filter-name="google+nexus">Google</div>
    <div data-filter-item data-filter-name="microsoft">Microsoft</div>
  </div>
</div>

Answer 1

您可以抓取所有项目并在每个项目的数据上使用string.indexOf来检查字符串中是否存在字符串。

$('[data-filter-item][data-filter-name]').each(function(element){
  var isPresent = $(this).data('filter-name').indexOf(searchVal.toLowerCase()) > -1;
  if(isPresent){
    // do something
  } else {
    // do something else
  }
});

我可以在“data-”元素中搜索多个值吗？

1 个答案: