时间戳

首页 > 解决方案 > 具有多个匹配单元格关键字的输入框

javascript - 具有多个匹配单元格关键字的输入框

问题描述

我试图通过只有一个输入而不是三个输入来使我的包含搜索更好，并单独匹配所有输入的单词。

到目前为止，我有三个输入，我可以在每个框中分别输入一个单词，并且能够一次搜索/匹配所有这些单词。例如“猫”、“狗”、“马”。

我想要的是只有一个输入并搜索“Cat Dog Horse”，但将它们单独匹配为“Cat”，“Dog”，“Horse”。

JSFiddle：https ://jsfiddle.net/grLzke2s/

function setValue() {
  var inputValue = document.getElementById("inputID").value;
  var inputValue2 = document.getElementById("inputID2").value;
  var inputValue3 = document.getElementById("inputID3").value;
  $('td:contains(' + inputValue + '):contains(' + inputValue2 + '):contains(' + inputValue3 + ')').css("color", "red");
}
table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<text>Keywords:</text><br>
<input id="inputID" value="Dog"></input>
<input id="inputID2" value="Horse"></input>
<input id="inputID3" value="Cat"></input>
<button onclick="setValue()">Use</button>
<table id="myTable">
  <tr>
    <td>Horse Dog Panda Mouse</td>
  </tr>
  <tr>
    <td>Elephant Mouse Panda Eagle</td>
  </tr>
  <tr>
    <td>Dog Fox Cat Horse</td>
  </tr>
  <tr>
    <td>Cat Elephant Eagle Fox</td>
  </tr>
</table>

实际：有效，但我需要三个单独的输入来匹配三个不同的单词。

预期：只有一个输入并且能够单独匹配所有输入的单词。

标签： javascriptjqueryhtml-tablecontains

解决方案

您可以用空格分割字符串并重新加入它们以构建:contains字符串。

例如

function setValue() {
  var inputValue = document.getElementById("inputID").value;
  if (!inputValue)
    return;

  var selector = "td:contains('" + inputValue.split(" ").join("'):contains('") + "')";
  console.log(selector);
  $(selector).css("color", "red");
}
table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<text>Keywords:</text><br>
<input id="inputID" value="Cat Dog Horse"></input>

<button onclick="setValue()">Use</button>
<table id="myTable">
  <tr>
    <td>Horse Dog Panda Mouse</td>
  </tr>
  <tr>
    <td>Elephant Mouse Panda Eagle</td>
  </tr>
  <tr>
    <td>Dog Fox Cat Horse</td>
  </tr>
  <tr>
    <td>Cat Elephant Eagle Fox</td>
  </tr>
</table>

要更改条件 from和to或您只需要用逗号分隔选择器。

例如

var selector = "td:contains('" + inputValue.split(" ").join("'),td:contains('") + "')";

推荐阅读