时间戳

首页 > 解决方案 > jQuery搜索单个单词而不是单词字符串

javascript - jQuery搜索单个单词而不是单词字符串

问题描述

问题：

我有一个 jQuery 搜索功能，但是它不是单独搜索单词。例如“ASUS B350”而不是“ASUS”和“B350” 这可以在搜索 Asus STRIX B350-F GAMING 时看到，“ASUS B350”没有结果，但“ASUS”和“B350”会。

代码：

$("#mySearch").on("keyup", function() {
  var value = $(this).val().toLowerCase();
  $("#myTable tr:not(.discarded) td:nth-child(1)").filter(function() {
    $(this).parent().toggle($(this).text().toLowerCase().indexOf(value) > -1)
  });
});

预期结果：

我还想如果字符串包含在 "" 中，它会按顺序搜索这些单词。

如果您需要更多详细信息，请告诉我

谢谢

标签： javascriptjqueryhtml

解决方案

您可以split使用每个空格的单词并检查这些单词是否存在于文本中every：

现在，如果您在以下代码段中搜索“Asus strix”，将显示两个 ASUS 结果

$("#mySearch").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr:not(.discarded) td:nth-child(1)").filter(function() {
        let toggle = value.split(" ").every(i => !i || $(this).text().toLowerCase().indexOf(i) > -1);
        $(this).parent().toggle(toggle);
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="mySearch" />
<table id="myTable">
	<tr><td>Asus STRIX B350-F GAMING</td></tr>	
	<tr><td>Asus ROG Strix SCAR II Gaming</td></tr>
	<tr><td>Dell G7 15 Gaming Laptop</td></tr>
</table>

推荐阅读