Question

我有一个jQuery函数，它检查输入字段并将其与列表组进行比较。如果在列表项中找到字符/单词，它将仅显示包含完全匹配的列表项。我正在使用trim（）。split（）来检测更多的单词/短语。

这是我的代码：

$('#box').keyup(function() {
  var valThis = $(this).val().toLowerCase();
  if (valThis == "") {
    $('.filterlist>li').show();
  } else {
    var subValues = valThis.trim().split(', ');
    $('.filterlist>li').each(function () {
      var node = $(this);
      var text = node.text().toLowerCase();  
      if (subValues.some(function (word) {
        return text.indexOf(word) !== -1;
      })) {
        node.show();  
      }
      else {
        node.hide();
      }
    });
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="box" type="text" placeholder="Search">

<ul class="filterlist" style="list-style:none;">
  <li>1. red</li>
  <li>2. blue</li>
  <li>3. red blue yellow</li>
  <li>4. blue red yellow</li>
  <li>5. red yellow</li>
  <li>6. red green</li>
</ul>

这很有效，如果您输入'红色，黄色'，则包含任一单词的所有项目仅显示包含这些单词的列表项目，即所有项目将显示除了项目'2'，因为它只有'蓝色'。另一方面，如果您输入“红黄色”，则只会返回“4”和“5”项，因为完全匹配。

但是我的问题是，有没有办法保留这个功能但是以某种方式添加条件允许用户显示仅包含输入内容的项目，但不一定是完全匹配？即input ='red + yellow'＆gt;列表：'3'，'4'和'5'或输入='蓝色+绿色'＆gt;没有显示列表。

我尝试使用选择器'：contains（）'和'：not（：contains（））'，但是我无法理解它。

任何帮助都会非常感激。

更新： 现在将输入值作为类添加到li标签中。

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

  /* remove split character */
  var valClass = valThis.replace(',','');

  if (valThis == "") {
    $('.filterlist>li').show();
  } else {
    var subValues = valThis.trim().split(', ');
    $('.filterlist>li').each(function () {
      var node = $(this);
      var text = node.text().toLowerCase();  
      if (subValues.some(function (word) {
        return text.indexOf(word) !== -1;
      })) {
        node.show();
        $(this).removeClass().addClass(valClass);  
      }
      else {
        node.hide();
      }
    });
  };
});

Answer 1

如果您可以将搜索值作为类添加到li元素上，那么您可以通过按类选择元素来大规模简化逻辑。

要执行此操作，只需删除搜索字词中的空格，然后将其替换为.即可。试试这个：

＆＃13;

$('#box').keyup(function() {
  var searchTerm = $(this).val().toLowerCase();
  if (searchTerm == '') {
    $('.filterlist > li').show();
  } else {
    try {
      var selector = '.' + searchTerm.replace(/\s+/g, '.');
      $('.filterlist > li').hide().filter(selector).show();
    } catch(e) {
      // only to bury the error when a selector is built whilst the user is mid-typing
    }
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="box" type="text" placeholder="Search">

<ul class="filterlist" style="list-style:none;">
  <li class="red">1. red</li>
  <li class="blue">2. blue</li>
  <li class="red blue yellow">3. red blue yellow</li>
  <li class="blue red yellow">4. blue red yellow</li>
  <li class="red yellow">5. red yellow</li>
  <li class="red green">6. red green</li>
</ul>

＆＃13;

请注意，此处仅需要try / catch来停止在输入过程中搜索到并且生成的选择器无效时发生的错误 - 例如{{1} }。如果您将设计更改为使用按钮，则可能会删除该try / catch。

Answer 2

您的解决方案中的if条件需要更改。

您可以在下面的小提琴中找到更改后的工作代码：

https://jsfiddle.net/9vhhvgb3/

更改为for(var i=0;i<subValues.length;i++){ if(text.indexOf(subValues[i]) > -1){ nodeToDisplay = true; }else{ nodeToDisplay = false; } } if(nodeToDisplay){ node.show(); } else { node.hide(); }

trim。（）。split（）和'完全匹配'

2 个答案: