js,JQuery实现,带筛选,搜索的select
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网上找了个插件，但是不好用</title>
<script src="jquery.js" charset="utf-8"></script>
<style>
body,html{padding:0;margin:0;width:100%;height:100%;}
</style>
</head>
<body>
<div style="height:500px;margin:20px;">
<!-- option必须带有 value 的值 -->
<select id="magicsuggest" data-edit-select="1">
<option value="1">哇哈哈</option>
<option value="2">天天</option>
<option value="3">xx</option>
<option value="1">哇哈哈哇哈哈哇哈哈哇哈哈哇哈哈</option>
<option value="2">天天</option>
<option value="3">xx</option>
<option value="1">哇哈哈</option>
<option value="2">天天</option>
<option value="3">xx</option>
<option value="1">哇哈哈</option>
<option value="2">天天</option>
<option value="3">xx</option>
</select>
</div>
<div style="height:1000px;"></div>
</body> <!-- 下面这段代码，就是可编辑select，嗯，那个丑陋的样式，被我也写在里面了 -->
<script type="text/javascript">
$.fn.filterSelect = (function(){
// 我就 很 纠结的，把样式内嵌在这里了，让你怎么改!!!!
var isInit = false;
function initCss(){
isInit = true;
var style = document.createElement("style");
var csstext = '.m-input-select{display:inline-block;*display:inline;position:relative;-webkit-user-select:none;}\
\n.m-input-select ul, .m-input-select li{padding:0;margin:0;}\
\n.m-input-select .m-input{padding-right:22px;}\
\n.m-input-select .m-input-ico{position:absolute;right:0;top:0;width:22px;height:100%;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAATElEQVQoU2NkIBEwkqiegTwNcXFx/4m1CW4DMZoWLVrEiOIkfJpAikGuwPADNk0wxVg1gASRNSErxqkBpgldMV4NuEKNvHggNg5A6gBo4xYmyyXcLAAAAABJRU5ErkJggg==) no-repeat 50% 50%;}\
\n.m-input-select .m-list-wrapper{}\
\n.m-input-select .m-list{display:none;position:absolute;z-index:1;top:100%;left:0;right:0;max-width:100%;max-height:250px;overflow:auto;border-bottom:1px solid #ddd;}\
\n.m-input-select .m-list-item{cursor:default;padding:5px;margin-top:-1px;list-style:none;background:#fff;border:1px solid #ddd;border-bottom:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\
\n.m-input-select .m-list-item:hover{background:#2D95FF;}\
\n.m-input-select .m-list-item-active{background:#2D95FF;}';
style = $("<style>"+ csstext +"</style>")[0];
// ie 竟然坑了...
// if(style.styleSheet) {
// style.styleSheet.cssText = csstext;
// }else{
// style.appendChild(document.createTextNode(csstext));
// }; var head = document.head || document.getElementsByTagName("head")[0];
if(head.hasChildNodes()){
head.insertBefore(style, head.firstChild);
}else{
head.appendChild(style);
}; }; return function(){
!isInit && initCss(); var $body = $("body");
this.each(function(i, v){
var $sel = $(v), $div = $('<div class="m-input-select"></div>');
var $input = $("<input type='text' class='m-input' />");
// var $wrapper = $("<div class='m-list-wrapper'><ul class='m-list'></ul></div>");
var $wrapper = $("<ul class='m-list'></ul>");
$div = $sel.wrap($div).hide().addClass("m-select").parent();
$div.append($input).append("<span class='m-input-ico'></span>").append($wrapper); // 遮罩层显示 + 隐藏
var wrapper = {
show: function(){
$wrapper.show();
this.$list = $wrapper.find(".m-list-item:visible");
this.setIndex(this.$list.filter(".m-list-item-active"));
this.setActive(this.index);
},
hide: function(){
$wrapper.hide();
},
next: function(){
return this.setActive(this.index + 1);
},
prev: function(){
return this.setActive(this.index - 1);
},
$list: $wrapper.find(".m-list-item"),
index: 0,
$cur: [],
setActive: function(i){
// 找到第1个 li，并且赋值为 active
var $list = this.$list, size = $list.size();
if(size <= 0){
this.$cur = [];
return;
}
$list.filter(".m-list-item-active").removeClass("m-list-item-active");
if(i < 0){
i = 0;
}else if(i >= size){
i = size - 1;
}
this.index = i;
this.$cur = $list.eq(i).addClass("m-list-item-active");
this.fixScroll(this.$cur);
return this.$cur;
},
fixScroll: function($elem){
// console.log($wrapper);
var height = $wrapper.height(), top = $elem.position().top, eHeight = $elem.outerHeight();
var scroll = $wrapper.scrollTop();
// 因为 li 的 实际 top，应该要加上 滚上 的距离
top += scroll;
if(scroll > top){
$wrapper.scrollTop(top);
}else if(top + eHeight > scroll + height){
// $wrapper.scrollTop(top + height - eHeight);
$wrapper.scrollTop(top + eHeight - height);
}
},
setIndex: function($li){
if($li.size() > 0){
this.index = this.$list.index($li);
$li.addClass("m-list-item-active").siblings().removeClass("m-list-item-active");
}else{
this.index = 0;
}
}
}; // input 的操作
var operation = {
// 文字更变了，更新 li, 最低效率的一种
textChange: function(){
val = $.trim($input.val());
$wrapper.find(".m-list-item").each(function(i, v){
if(v.innerHTML.indexOf(val) >= 0){
$(v).show();
}else{
$(v).hide();
}
});
wrapper.show();
},
// 设值
setValue: function($li){
if($li && $li.size() > 0){
var val = $.trim($li.html());
$input.val(val).attr("placeholder", val);
wrapper.setIndex($li);
$sel.val($li.attr("data-value")).trigger("change");
}else{
$input.val(function(i, v){
return $input.attr("placeholder");
});
};
wrapper.hide();
this.offBody();
},
onBody: function(){
var self = this;
setTimeout(function(){
self.offBody();
$body.on("click", self.bodyClick);
}, 10);
},
offBody: function(){
$body.off("click", this.bodyClick);
},
bodyClick: function(e){
var target = e.target;
if(target != $input[0] && target != $wrapper[0]){
wrapper.hide();
operation.setValue();
operation.offBody();
}
}
}; // 遍历 $sel 对象
function resetOption(){
var html = "", val = "";
$sel.find("option").each(function(i, v){
if(v.selected && !val){
val = v.text;
};
html += '<li class="m-list-item'+ (v.selected ? " m-list-item-active" : "") +'" data-value="'+ v.value +'">'+ v.text +'</li>';
});
$input.val(val);
$wrapper.html(html);
};
$sel.on("optionChange", resetOption).trigger("optionChange");
$sel.on("setEditSelectValue", function(e, val){
// console.log(val);
var $all = $wrapper.find(".m-list-item"), $item;
for(var i = 0, max = $all.size(); i < max; i++){
$item = $all.eq(i);
if($item.attr("data-value") == val){
operation.setValue($item);
return;
}
}
}); // input 聚焦
$input.on("focus", function(){
this.value = "";
operation.textChange();
operation.onBody();
}).on("input propertychange", function(e){
operation.textChange();
}).on("keydown", function(e){
// 上 38, 下 40， enter 13
switch(e.keyCode){
case 38:
wrapper.prev();
break;
case 40:
wrapper.next();
break;
case 13:
operation.setValue(wrapper.$cur);
break;
}
}); $div.on("click", ".m-input-ico", function(){
// 触发 focus 和 blur 事件
// focus 是因为 input 有绑定
// 而 blur，实际只是失去焦点而已，真正隐藏 wrapper 的是 $body 事件
$wrapper.is(":visible") ? $input.blur() : ($input.val("").trigger("focus"));
}); // 选中
$wrapper.on("click", ".m-list-item", function(){
operation.setValue($(this));
return false;
}); setTimeout(function(){
// for ie
wrapper.hide();
}, 1) }); return this;
};
})();
</script> <!-- 这段代码，是遍历所有拥有 data-edit-select 属性的元素，并把他们变为可编辑 -->
<script>
// 使用了这个插件，select该怎么用就怎么用
// 任何选择，同样会触发 select 的 更变的说【即select的值会同步更新】
//
var $select = $("select[data-edit-select]").filterSelect();
// --> 这时候的 $select === $("#magicsuggest");
// 也可以 用 $("#magicsuggest").on("change")，两者等价
$select.on("change", function(){
// console.log(this.value)
});
// 也可以通过 $("#magicsuggest").val() 拿到最新的值
// 通过 $("#magicsuggest").trigger("setEditSelectValue", 2); 设置选中的值为 2
// 通过 $("#magicsuggest").trigger("optionChange") 触发 更新 option 的值
</script>
</html>
源地址:https://blog.csdn.net/linfenpan/article/details/48750889
js,JQuery实现,带筛选,搜索的select的更多相关文章
- js/jQuery实现类似百度搜索功能
一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...
- 【经验】angularjs 实现带查找筛选功能的select下拉框
一.背景 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有 ...
- js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选
转载:https://www.cnblogs.com/ooo0/p/6278102.html js jquery 获取元素(父节点,子节点,兄弟节点) 一,js 获取元素(父节点,子节点,兄弟节点) ...
- jquery textSearch实现页面搜索 注意！！！！调用这个插件后，js事件绑定如，on、bind、live delegate全部失效，折腾了我一整天！！！
今天我们介绍的这个插件来着http://www.zhangxinxu.com/wordpress/,张鑫旭的文章写得挺好的,大家有兴趣的多看看. 我们今天的这个插件叫“jquery.textSearc ...
- js&jquery 获取select下拉框的值、文本内容、自定义属性
js&jquery 获取select下拉框的值.文本内容.自定义属性 CreationTime--2018年7月2日09点22分 Author:Marydon html <selec ...
- js生成二维码（jquery自带）
//引入js<script type="text/javascript" src="js/jquery.js"></script> &l ...
- js,jquery,css,html5特效
包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...
- js/jQuery使用过程中常见问题
目录 一.jQuery选择器选择选中的或者disabled的选择框时attr函数无效 二.jQuery each函数的break/continue 三.jQuery 获取元素的left会值/left数 ...
- js/jquery/html前端开发常用到代码片段
1.IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE ...
随机推荐
- PHPExcel导出数据时字段超过26列出错Invalid cell coordinate [1
http://blog.csdn.net/dl425134845/article/details/46650961 以下是解决方案函数 /** * 方法名: getExcel * 作用 ...
- 业务侧有大量timeout请求超时日志
故障背景:程序日志发现有程序请求数据库有大量的timeout请求故障时间:xxx~xxx 故障排查:排查应用服务器和数据库服务器网络和其它硬件监控没有断点,数据库监控请求数当时时间段几乎为0 故障分析 ...
- 你的B计划在哪里？
春节同学聚会,大家聊起近况. 甲在实体经济部门工作,企业效益不好,正酝酿减员增效,他忧心忡忡,跳槽都不知道怎么跳,因为全行业都不景气. 乙从事互联网工作,行业发展热火朝天,新事物层出不穷,但是他已人到 ...
- RedHat Linux关闭seLinux命令
Redhat使用了SELinux来增强安全,关闭的办法为: 1. 永久有效 修改 /etc/selinux/config 文件中的 SELINUX="" 为 disabled ,然 ...
- jquery 的鼠标事件/淡入淡出/绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- ionic3 点击输入 框弹出白色遮罩 并把 界面顶到上面
这个蛋疼 问题 ,在android 上面遇到这种情况 ,键盘弹出的时候 总有一个白色的遮罩在后面出现,网上查了很久都没发现原因. 偶然发现一个方法 ,试下了下 问题解决了. 代码如下: IonicMo ...
- SpringCloud简介
1.什么是微服务? 微服务就是不同的模块部署在不同的服务器上面,通过接口去访问就是微服务 作用:利用分布式解决网站高并发带来的问题 2.什么是集群? 多台服务器部署相同应用构成一个集群 作用:通过负载 ...
- LeetCode（118）：杨辉三角
Easy! 题目描述: 给定一个非负整数 numRows,生成杨辉三角的前 numRows 行. 在杨辉三角中,每个数是它左上方和右上方的数的和. 示例: 输入: 5 输出: [ [1], [1,1] ...
- ajax执行成功后，在success回调函数中把后台返回的list还原到html的table中
需求描述:前台通过onclick触发ajax,到后台返回一个list(json格式的),把list插入到html的table中. 思路简介:￣□￣|| 刚开始的时候,是没有思路的,就卡在了,怎么把 a ...
- bzoj3991 lca+dfs序应用+set综合应用
/* 给定一棵树,树上会出现宝物,也会有宝物消失 规定如果要收集树上所有宝物,就要选择一个点开始,到每个宝物点都跑一次,然后再回到那个点 现在给定m次修改,每次修改后树上就有一个宝物消失,或者一个宝物 ...