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 ...
随机推荐
- Django请求周期图
- Laravel 5.2响应--后台back()->with('提示信息'),前台为什么收不到?
### 今天遇到了个小问题,想后台判断数据的时候,返回前台,然后弹窗提示没有数据 但是前台点了有返回,咩有提示信息 ### 网上找了很9⃣️,关于这方面的都是属于验证时候的相关问题,但是我这个跟验证没 ...
- Ex 7_17 考虑如下的网络(其中数字为对应边的容量)...第十三次作业
(a) 利用ford-fulkerson算法即可求出最大流和最小分割. (b) 剩余网络为 由S可达的顶点为A.B.可达T的顶点为C. (c) 瓶颈边有e(A,C),e(B,C). (d) 下图中不包 ...
- <转载>ford-fulkerson算法2
原文链接https://www.cnblogs.com/luweiseu/archive/2012/07/14/2591573.html 作者:wlu 7. 网络流算法--Ford-Fulkerson ...
- <转载>关系规范化之求最小函数依赖集(最小覆盖)
原文链接http://blog.csdn.net/icurious/article/details/51240114 最小函数依赖集 一.等价和覆盖 定义:关系模式R<U,F>上的两个依赖 ...
- [PHP]命名空间的一些要点
1.命名空间前不能接"\": namespace MyProject\Sub\Level; // it's right; namespace \MyProject\Sub\Leve ...
- docker的安装及使用
准备工具: 系统:ubuntu18.04 docker软件包:docker-compose.tar.gz,containerd.io_1.2.4-1_amd64.deb,docker-ce-cli_1 ...
- 用KendoGrid控件 快速做CRUD
先看效果: 主要引用的文件: <link href="/css/kendo/2014.1.318/kendo.common.min.css" rel="styles ...
- Codeforces 1097G Vladislav and a Great Legend [树形DP,斯特林数]
洛谷 Codeforces 这题真是妙的很. 通过看题解,终于知道了\(\sum_n f(n)^k\)这种东西怎么算. update:经过思考,我对这题有了更深的理解,现将更新内容放在原题解下方. ...
- Oracle 所有字典
select * from DBA_CONS_COLUMNS ; ---Information about accessible columns in constraint definitions s ...