遇到的问题:

1.动态添加了某些元素,在动态添加的某个元素上绑定事件失效

原因:因为需要绑定的元素的直接父元素也是动态添加的
解决:向上为上一级父元素绑定事件

$(".check-box").on('click','i',function(){//在check-value上动态添加无效,因为check-value也是动态添加上的

  $(this).parent().remove();

});

2.多选框判断是否选中,方法无效

原因:判断钱必须先为其绑定点击事件

$(".total").click(function(){//必须为多选按钮绑定点击事件才能判断

  if($(this).is(':checked')){

    filterObj.attr('disabled','disabled');

  }else{

    filterObj.removeAttr('disabled');

}

});

3.事件阻止冒泡问题(多少次了还是不会...)

-- 搜索框绑定点击事件
-- 弹出搜索列表;
-- 为document绑定一次性点击事件,隐藏搜索列表;
-- 阻止事件流
-- 为搜索列表绑定点击事件
-- 阻止事件流

filterObj.on('click',function(e){//点击搜索框,弹出

  selectObj.css("display","block");

  $(document).one("click", function(){

    selectObj.css("display","none");

  });

  e.stopPropagation();

});

selectObj.on("click", function(e){

  e.stopPropagation();

});

效果图大概如下:

附上完整代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>用jquery实现搜索框的过滤效果</title>

    <style>

        .wrap{

            overflow: hidden;

        }

        .wrap p{

            float:left;

            margin-top: 220px;

        }

        label{

            margin-left: 100px;

        }

        .box{

            float:left;

            position: relative;

            width:500px;

            height:240px;

            margin-left:30px;

        }

        .select-list{

            position: absolute;

            left:0;

            bottom:40px;

            display: none;

            margin:0;

            padding:0;

            width:500px;

            border: 1px solid grey;

            list-style: none;

            border-bottom:0;

        }

        .select-list li{

            padding: 7px 10px;

        }

        .active{

            background-color: #f5f5f5;

        }

        .filter-box{

            position: absolute;

            bottom:0;

            left:0;

            width:100%;

            height:40px;

            border-radius: 3px;

            border: 1px solid grey;

        }

        .check-box{

            display: inline-block;

            float:left;

            margin-left: 10px;

        }

        .check-value{

            display: inline-block;

            margin-top: 5px;

            height:30px;

            width:60px;

            line-height: 30px;

            font-size: 14px;

            margin-right: 10px;

            border-radius: 3px;

            border: 1px solid grey;

            background-color: #f5f5f5;

        }

        i{

            margin-right:10px;

            cursor: pointer;

        }

        .filter{

            float:left;

            min-width: 16px;

            height:36px;

            padding-left: 10px;

            outline: none;

            border: none;

        }

        input:disabled{

            background-color: #F5F5F5;

        }

    </style>

</head>

<body>

<div class="wrap">

    <p>人员: <label><input type="checkbox" value="all" class="total" name="all">全选</label></p>

    <div class="box">

        <ul class="select-list">

            <li>12</li>

            <li>ee</li>

            <li>52</li>

            <li>6882</li>

            <li>6882</li>

            <li>aaa</li>

        </ul>

        <div class="filter-box">

            <span class="check-box"></span>

            <input type="text" class="filter">

        </div>

    </div>

</div>

</body>

<script src="jquery-1.11.3.min.js"></script>

<script>

    $(document).ready(function(){

        var filterObj = $(".filter");

        var selectObj = $(".select-list");

        var index;

        fun();

        function fun(){

            //点击搜索框,弹出列表

            filterObj.on('click',function(e){//点击搜索框,弹出

                selectObj.css("display","block").find("li").css("display","block");

                $(document).one("click", function(){

                    selectObj.css("display","none");

                });

                e.stopPropagation();//阻止绑定在filterObj上的事件传播到其他节点

            });

            selectObj.on("click", function(e){

                e.stopPropagation();//阻止绑定在selectObj上的事件传播到其他节点

            });

            //点击列表中的值,添加到搜索框中

            selectObj.find("li").click(function(){

                index = $(".select-list li").index(this);

                filterObj.val("").focus();

                if($(this).attr('class')!='active'){

                    $(this).addClass('active');

                    $(".check-box").css("display","block");

                    $("<span class='check-value'/>").appendTo(".check-box");

                    $("<i/>").html('×').attr('id',index).appendTo(".check-value:last");

                    $("<span/>").html($(this).html()).appendTo(".check-value:last");

                }

            });

            //点击x删除对应的值

            $(".check-box").on('click','i',function(){//在check-value上动态添加无效,因为check-value也是动态添加上的

                index = $(this).attr("id");

                selectObj.find("li").eq(index).removeClass('active');

                $(this).parent().remove();

            });

            //过滤功能

            //让jQuery的contains方法不区分大小写

            jQuery.expr[':'].Contains = function(a,i,m){

                return (a.textContent || a.innerText|| a.innerHTML || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;

            };

            //搜索框文字一旦改变就匹配查找

            $(".filter")

                    .change( function () {

                        var filterVal = $(this).val();

                        if(filterVal) {

                            $matches = $(selectObj).find('li:Contains(' + filterVal + ')');

                            $('li', selectObj).not($matches).slideUp();

                            $matches.slideDown();

                        } else {

                            selectObj.css("display","block").find("li").css("display","block");

                        }

                        return false;

                    })

                    .keyup( function () {

                        $(this).change();

                    });

        }

        //全选后,禁用input,隐藏列表

        $(".total").click(function(){//必须为多选按钮绑定点击事件才能判断

            if($(this).is(':checked')){

                filterObj.val("").attr('disabled','disabled');

                $(".filter-box").css("backgroundColor","#f5f5f5");

                $(".check-box").off('click','i');

                $(".check-box").empty();

            }else{

                filterObj.removeAttr('disabled');

                $(".filter-box").css("backgroundColor","");

                selectObj.find("li").removeClass('active');

               fun();

            }

        });

    });

</script>

</html>

用jQuery实现搜索框的过滤效果的更多相关文章

  1. chosen.jquery.js 搜索框只能从头匹配的解决思路+方法

    chosen.jquery.js 搜索框只能从头匹配的解决思路+方法 心急者请直接看下方 总结 ,由于本问题未能找到直接答案,所以只能通过修改源码解决.故将修改源码思路贴出来供大家参考,在遇到其他改源 ...

  2. jQuery实现搜索框插件+豆瓣音乐接口实现豆瓣搜索框

    jQuery实现搜索框插件 豆瓣音乐接口实现豆瓣搜索框 豆瓣接口有时不稳定,网络请求会报400,不要惊慌.我主要是练习一下jQuery的JSONP和封装插件. <div class=" ...

  3. 使用jquery实现搜索框的位置变换

    现在很多的网站都存在这样一个效果:当用户搜索信息后,滚动内容时,搜索框的位置会产生变化,会固定在某个位置,方便用户进行再次搜索.比如百度图片.为了提高系统用户体验,也想加入这个效果,经过小段时间摸索, ...

  4. Jquery实现搜索框提示功能

    博客的前某一篇文章中http://www.cnblogs.com/hEnius/p/2013-07-01.html写过一个用Ajax来实现一个文本框输入的提示功能.最近在一个管理项目的项目中,使用后发 ...

  5. jquery php 百度搜索框智能提示效果

    这个程序是利用php+ajax+jquery 实现的一个仿baidu智能提示的效果,有须要的朋友能够下载測试哦. 代码例如以下 index.html文件,保保存成index.htm <!DOCT ...

  6. jquery实现搜索框从中间向两边扩展（左右放大）

    显示效果: 隐藏效果: 前端核心代码如下: <div class="search-icon col-md-2 col-sm-2 col-xs-4 col-md-offset-5 col ...

  7. ASP.NET JQuery 随笔-搜索框默认提示

    一.文本框中创建默认文本提示 通常用户在搜索内容时,在文本框输入内容前,文本框都会给出默认提示,提示用户输入正确的内容进行搜索. 当文本框获得焦点,如果文本框内容跟提示内容一样,提示内容会自然消失. ...

  8. Android 浮动搜索框 searchable 使用(转)。

    Android为程序的搜索功能提供了统一的搜索接口,search dialog和search widget,这里介绍search dialog使用.search dialog 只能为于activity ...

  9. 使用jQuery和CSS3生成的搜索框变形全屏搜索效果

    在线演示 本地下载 使用jQuery和CSS3过渡变形效果生成的一个搜索框变形效果实现,可以帮助你更好利用页面格式和内容.实验性质的代码,请大家在产品环境里自己修改使用!

随机推荐

  1. java面试题(杨晓峰)---第三讲谈谈final、finally、finalize有什么不同？

    java语言有很多看起来相似,但用途却完全不相同的语言要素,这些内容往往容易成为面试官考察你知识掌握程度的切入点. 今天我要问你一个基础的java经典题目,谈谈final.finally.finali ...

  2. codeforce Gym 100500A Poetry Challenge（博弈，暴搜）

    题解:状态压缩之后,暴力dfs,如果有一个选择,能让对手必败,那么就是必胜态,能转移到的状态都是对手的必胜态,或者无法转移,就是必败态. 总算是过了,TLE是因为状态没判重. #include< ...

  3. Spark性能调优之道——解决Spark数据倾斜（Data Skew）的N种姿势

    原文:http://blog.csdn.net/tanglizhe1105/article/details/51050974 背景 很多使用Spark的朋友很想知道rdd里的元素是怎么存储的,它们占用 ...

  4. Unity学习之路——C#相关

    1.C#数组数组定义 int[] number; float[] score; string[] names;动态初始化,借助new运算符为数组元素分配空间int[] Array = new int[ ...

  5. LaTeX中常用数学符号总结

    博主一些小小的总结,以后会继续更的. 某个传送门. ⎝⎛•‿•⎞⎠⎝⎛•‿•⎞⎠⎝⎛•‿•⎞⎠ 1.左右一个$: 1+1=2 $1+1=2$ ($3$及以后的都需要$) 2.左右两个$: 1+1=2 ...

  6. 【数论分块】bzoj2956: 模积和

    数论分块并不精通……第一次调了一个多小时才搞到60pts:因为不会处理i==j的情况,只能枚举了…… Description $\sum_{i=1}^{n}\sum_{j=1 \land i \not ...

  7. SAP 常用业务数据表设计

    表的要求表中使用的字段请尽量参照各模块的SAP字段标准使用习惯:  例:"ZXSLRZX销售组织对应的利润中心"中的销售组织应该使用VKORG.利润中心应该使用PRCTR.根据表的 ...

  8. pandas中层次化索引与切片

    Pandas层次化索引 1. 创建多层索引 隐式索引: 常见的方式是给dataframe构造函数的index参数传递两个或是多个数组 Series也可以创建多层索引 Series多层索引 B =Ser ...

  9. token_get_all()函数

    token_get_all (PHP 4 >= 4.2.0, PHP 5) token_get_all — 将提供的源码按 PHP 标记进行分割,可以用作php源代码的压缩,会按照固定的分解方法 ...

  10. jenkins+svn+pipeline+kubernetes部署java应用（一）

    一.linux安装svn服务端 yum -y install subversion 二.创建svn版本库(项目仓库) mkdir -p /home/svn svnadmin create /home/ ...