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列表检索功能的实现代码。希望对大家有帮助。如果你有任何问题,请给我留言,边肖会及时回复你。非常感谢您对我们网站的支持!
版权声明:jQuery列表检索功能实现代码是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。