jQuery列表检索功能实现代码

2019/6/27 20:48:55

编程Tag： jQuery 检索

本文主要是介绍jQuery列表检索功能实现代码，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

先给大家展示下效果图：

这里写图片描述

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

$(function(){
      $("input[type=button]").click(function(){
        var txt=$("input[type=text]").val();
        if($.trim(txt)!=""){
          $(".ggsm_list li span").parent().hide().filter(":contains('"+txt+"')").show();
        }else{
          $(".ggsm_list li").show();
        }
      });
    });

给按钮一个点击事件，首先获取到input中的值，然后让span的其它父元素都隐藏(其实就是隐藏掉其它的li标签)然后查找含有txt(就是input中值)的那一个li，然后显示出来

$("#textInput").on("keypress", function (e) {
        if (e.charCode === 13) {
          var txt=$("input[type=text]").val();
          if($.trim(txt)!=""){
            $(".ggsm_list li span").parent().hide().filter(":contains('"+txt+"')").show();
          }else{
            $(".ggsm_list li").show();
          }
        }

这个代码是对键盘回车键做的一个优化(代码不多很简单)

以上所述是小编给大家介绍的jQuery列表检索功能实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对找一找教程网网站的支持！

这篇关于jQuery列表检索功能实现代码的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

jQuery列表检索功能实现代码

相关编程文章