jQuery列表检索功能实现代码详解

小云云
Lepaskan: 2018-01-01 10:32:41
asal
1406 orang telah melayarinya

要实现一个简单的列表,右上角有一个检索功能我们要实现的是列表检索功能,具体实例代码大家参考下本文,希望能帮助到大家。

先给大家展示下效果图:

这里写图片描述 

这是一个简单的列表 右上角有一个检索功能 我们要实现的是列表检索功能 是用的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();
        }
      });
    });
Salin selepas log masuk

给按钮一个点击事件,首先获取到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();
          }
        }
Salin selepas log masuk

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

相关推荐:

基于JavaScript实现类似于百度学术高级检索功能_javascript技巧

php+sqlite数据库操作示例详解(创建/打开/插入/检索)

总结JavaScript字符串检索字符的实例教程

Atas ialah kandungan terperinci jQuery列表检索功能实现代码详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!