我有一个搜索框,在同一页面上有一个链接列表
如果我在搜索框中输入..“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>
最佳答案
要实现此目的,您可以使用 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
。
关于javascript - 查找与搜索框匹配的链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41937241/