用jQuery实现搜索框的过滤效果
遇到的问题:
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实现搜索框的过滤效果的更多相关文章
- chosen.jquery.js 搜索框只能从头匹配的解决思路+方法
chosen.jquery.js 搜索框只能从头匹配的解决思路+方法 心急者请直接看下方 总结 ,由于本问题未能找到直接答案,所以只能通过修改源码解决.故将修改源码思路贴出来供大家参考,在遇到其他改源 ...
- jQuery实现搜索框插件+豆瓣音乐接口实现豆瓣搜索框
jQuery实现搜索框插件 豆瓣音乐接口实现豆瓣搜索框 豆瓣接口有时不稳定,网络请求会报400,不要惊慌.我主要是练习一下jQuery的JSONP和封装插件. <div class=" ...
- 使用jquery实现搜索框的位置变换
现在很多的网站都存在这样一个效果:当用户搜索信息后,滚动内容时,搜索框的位置会产生变化,会固定在某个位置,方便用户进行再次搜索.比如百度图片.为了提高系统用户体验,也想加入这个效果,经过小段时间摸索, ...
- Jquery实现搜索框提示功能
博客的前某一篇文章中http://www.cnblogs.com/hEnius/p/2013-07-01.html写过一个用Ajax来实现一个文本框输入的提示功能.最近在一个管理项目的项目中,使用后发 ...
- jquery php 百度搜索框智能提示效果
这个程序是利用php+ajax+jquery 实现的一个仿baidu智能提示的效果,有须要的朋友能够下载測试哦. 代码例如以下 index.html文件,保保存成index.htm <!DOCT ...
- jquery实现搜索框从中间向两边扩展（左右放大）
显示效果: 隐藏效果: 前端核心代码如下: <div class="search-icon col-md-2 col-sm-2 col-xs-4 col-md-offset-5 col ...
- ASP.NET JQuery 随笔-搜索框默认提示
一.文本框中创建默认文本提示 通常用户在搜索内容时,在文本框输入内容前,文本框都会给出默认提示,提示用户输入正确的内容进行搜索. 当文本框获得焦点,如果文本框内容跟提示内容一样,提示内容会自然消失. ...
- Android 浮动搜索框 searchable 使用(转)。
Android为程序的搜索功能提供了统一的搜索接口,search dialog和search widget,这里介绍search dialog使用.search dialog 只能为于activity ...
- 使用jQuery和CSS3生成的搜索框变形全屏搜索效果
在线演示 本地下载 使用jQuery和CSS3过渡变形效果生成的一个搜索框变形效果实现,可以帮助你更好利用页面格式和内容.实验性质的代码,请大家在产品环境里自己修改使用!
随机推荐
- UVA 1606 Amphiphilic Carbon Molecules 两亲性分子 （极角排序或叉积，扫描法）
任意线可以贪心移动到两点上.直接枚举O(n^3),会TLE. 所以采取扫描法,选基准点,然后根据极角或者两两做叉积比较进行排排序,然后扫一遍就好了.旋转的时候在O(1)时间推出下一种情况,总复杂度为O ...
- BCB:WebBrowser 控件说明
控件文件:system32\shdocvw.oca shdocvw.dll 注册:regsvr32 shdocvw.dll WebBrowser 是 IE 内核做的 VB 控件, WebBrow ...
- React入门教程(二)
前言 距离上次我写 React 入门教程已经快2个月了,年头年尾总是比较忙哈,在React 入门教程(一)我大概介绍了 React 的使用和一些注意事项,这次让我们来继续学习 React 一. Rea ...
- 【Git版本控制】GitHub上fork项目和clone项目的区别
fork:在github页面,点击fork按钮,将别人的仓库复制一份到自己的仓库. clone:直接将github中的仓库克隆到自己本地电脑中 问题1:pull request的作用 比如在仓库的主人 ...
- 腾讯云Ubuntu服务器修改root密码
1.修改root密码 执行以下命令,按照提示修改密码 sudo passwd root 2.修改ssh配置 执行以下命令 sudo vi /etc/ssh/sshd_config 找到 PermitR ...
- 如何使用jmeter做关联
1.适用场景 从上一个接口的返回值中获取值传递给下一个接口使用 2.添加JSON Extractor 在需求提取的参数上添加--后置处理器--JSON Extractor 从登录接口的返回值中取use ...
- python爬虫集合
逐渐也写了有二十余篇博文,内容一多就导致有些内容不能够方便快捷定位. 虽然博客有标签进行分类,实际查找时也并不如做一个同类文章的集合来得直观. 这里就对python爬虫相关博文做个集合: 爬虫基础知识 ...
- org.apache.catalina.webresources.Cache.backgroundProcess The background cache eviction process was unable to free [10] percent of the cache for Context [/filestore] - consider increasing the maximum s
需要耐心啊,太急于求成,希望直接就得到解决方法了...以至于正确方法都已经出现了,我却没有耐心看下去,所以反而又耽误了不少时间.... 项目加载100+张图片,还有一个小的MP4,所以console警 ...
- zoj 4049
Halting Problem Time Limit: 1 Second Memory Limit: 65536 KB In computability theory, the haltin ...
- Centos7重启网卡失败解决方法
service Network-Manager stop 执行命令解决,如果执行命令还是失败,则是配置文件内容的问题,检查配置文件