javascript - 查找与搜索框匹配的链接

Question

我有一个搜索框，在同一页面上有一个链接列表

如果我在搜索框中输入..“Test1”..那么我应该返回该链接..如果我输入..“Te”..那么我应该返回所有链接。

我已阅读有关使用 .filter 的内容，但不确定如何实现它。

$("#ButtonSearch").click(function() {
  var textboxValue = $("#SearchLink").val();
  $("a").each(function() {
    // here is where I am stuck.. how do I compare textboxValue to each of the link's text and return a match?
  })

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="SearchLink" />
<input type="submit" value="Search" id="ButtonSearch" />

<h4><a href="#" id="Trig5">General Information</a></h4>
<div class="slider" id="Slide5">
  <ul>
    <li><a href="www.test1.com" target="_blank">Test1</a></li>
    <li><a href="www.test2.com" target="_blank">Test2</a></li>
    <li><a href="www.test3.com" target="_blank">Test3</a></li>
    <li><a href="www.test4.com" target="_blank">Test4</a></li>
    <li><a href="www.test5.com" target="_blank">Test5</a></li>
    <li><a href="www.test6.com" target="_blank">Test6</a></li>
    <li><a href="www.test7.com" target="_blank">Test7</a></li>
    <li><a href="www.test8.com" target="_blank">Test8</a></li>
  </ul>
</div>

Answer 1

要实现此目的，您可以使用 filter() 方法仅返回包含您正在搜索的文本值的元素。

要执行不区分大小写的比较，您只需将元素的文本和您要搜索的值转换为相同的大小写，在下面的示例中，我将它们都设置为小写。

另外，如果找不到文本，大概您想隐藏整个 li 元素，而不仅仅是 a ，所以我修改了使用的选择器。试试这个:

$("#ButtonSearch").click(function() {
  var textboxValue = $("#SearchLink").val().toLowerCase();

  if (textboxValue) {
    $("li").hide().filter(function() {
       return $(this).find('a').text().toLowerCase().indexOf(textboxValue) != -1;
    }).show();
  } else {
    $('li').show();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="SearchLink" />
<button id="ButtonSearch">Search</button>

<h4><a href="#" id="Trig5">General Information</a></h4>
<div class="slider" id="Slide5">
  <ul>
    <li><a href="www.test1.com" target="_blank">Test1</a></li>
    <li><a href="www.test2.com" target="_blank">Test2</a></li>
    <li><a href="www.test3.com" target="_blank">Test3</a></li>
    <li><a href="www.test4.com" target="_blank">Test4</a></li>
    <li><a href="www.test5.com" target="_blank">Test5</a></li>
    <li><a href="www.test6.com" target="_blank">Test6</a></li>
    <li><a href="www.test7.com" target="_blank">Test7</a></li>
    <li><a href="www.test8.com" target="_blank">Test8</a></li>
  </ul>
</div>

请注意，如果在框中未输入任何值，这也将再次显示所有 li 元素。它还会在 a 元素文本中的任意位置搜索匹配项。如果您只想在文本开头查找匹配项，请将 != -1 替换为 == 0。