jQuery列表检索功能实现代码

让我先给你看效果图：

这是一个简单的列表。右上角有检索功能。我们要实现的是列表检索功能是通过jquery实现的。具体代码如下

$(function(){ $(' input[type=button]')。单击(function(){ var txt=$(' input[type=text]')。val()；if($。装饰件(txt)！=''){ $('.ggsm _ list Li span’)。父项()。隐藏()。过滤器(' : contains(' txt ' ')')。show()；}else{ $('。ggsm _ list Li’)。show()；} });});给按钮一个点击事件，首先获取input中的值，然后隐藏span的其他父元素(实际上是隐藏其他li标签)，然后找到包含txt的li(即input中的值)，然后显示它

$('#textInput ')。on('keypress '，function(e){ if(e . CharCode===13){ var txt=$(' input[type=text]')。val()；if($。装饰件(txt)！=''){ $('.ggsm _ list Li span’)。父项()。隐藏()。过滤器(' : contains(' txt ' ')')。show()；}else{ $('。ggsm _ list Li’)。show()；}}该代码是对键盘回车键的优化(代码少而简单)

以上是边肖介绍的jQuery列表检索功能的实现代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！