代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>网上找了个插件，但是不好用</title>
  6.     <script src="jquery.js" charset="utf-8"></script>
  7.     <style>
  8.         body,html{padding:0;margin:0;width:100%;height:100%;}
  9.     </style>
  10. </head>
  11. <body>
  12.     <div style="height:500px;margin:20px;">
  13.         <!-- option必须带有 value 的值 -->
  14.         <select id="magicsuggest" data-edit-select="1">
  15.             <option value="1">哇哈哈</option>
  16.             <option value="2">天天</option>
  17.             <option value="3">xx</option>
  18.             <option value="1">哇哈哈哇哈哈哇哈哈哇哈哈哇哈哈</option>
  19.             <option value="2">天天</option>
  20.             <option value="3">xx</option>
  21.             <option value="1">哇哈哈</option>
  22.             <option value="2">天天</option>
  23.             <option value="3">xx</option>
  24.             <option value="1">哇哈哈</option>
  25.             <option value="2">天天</option>
  26.             <option value="3">xx</option>
  27.         </select>
  28.     </div>
  29.     <div style="height:1000px;"></div>
  30. </body>
  31.  
  32. <!-- 下面这段代码，就是可编辑select，嗯，那个丑陋的样式，被我也写在里面了 -->
  33. <script type="text/javascript">
  34. $.fn.filterSelect = (function(){
  35.     // 我就 很 纠结的，把样式内嵌在这里了，让你怎么改!!!!
  36.     var isInit = false;
  37.     function initCss(){
  38.         isInit = true;
  39.         var style = document.createElement("style");
  40.         var csstext = '.m-input-select{display:inline-block;*display:inline;position:relative;-webkit-user-select:none;}\
  41.                         \n.m-input-select ul, .m-input-select li{padding:0;margin:0;}\
  42.                         \n.m-input-select .m-input{padding-right:22px;}\
  43.                         \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%;}\
  44.                         \n.m-input-select .m-list-wrapper{}\
  45.                         \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;}\
  46.                         \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;}\
  47.                         \n.m-input-select .m-list-item:hover{background:#2D95FF;}\
  48.                         \n.m-input-select .m-list-item-active{background:#2D95FF;}';
  49.         style = $("<style>"+ csstext +"</style>")[0];
  50.         // ie 竟然坑了...
  51.         // if(style.styleSheet) {
  52.         //     style.styleSheet.cssText = csstext;
  53.         // }else{
  54.         //     style.appendChild(document.createTextNode(csstext));
  55.         // };
  56.  
  57.         var head = document.head || document.getElementsByTagName("head")[0];
  58.         if(head.hasChildNodes()){
  59.             head.insertBefore(style, head.firstChild);
  60.         }else{
  61.             head.appendChild(style);
  62.         };
  63.  
  64.     };
  65.  
  66.     return function(){
  67.         !isInit && initCss();
  68.  
  69.         var $body = $("body");
  70.         this.each(function(i, v){
  71.             var $sel = $(v), $div = $('<div class="m-input-select"></div>');
  72.             var $input = $("<input type='text' class='m-input' />");
  73.             // var $wrapper = $("<div class='m-list-wrapper'><ul class='m-list'></ul></div>");
  74.             var $wrapper = $("<ul class='m-list'></ul>");
  75.             $div = $sel.wrap($div).hide().addClass("m-select").parent();
  76.             $div.append($input).append("<span class='m-input-ico'></span>").append($wrapper);
  77.  
  78.             // 遮罩层显示 + 隐藏
  79.             var wrapper = {
  80.                 show: function(){
  81.                     $wrapper.show();
  82.                     this.$list = $wrapper.find(".m-list-item:visible");
  83.                     this.setIndex(this.$list.filter(".m-list-item-active"));
  84.                     this.setActive(this.index);
  85.                 },
  86.                 hide: function(){
  87.                     $wrapper.hide();
  88.                 },
  89.                 next: function(){
  90.                     return this.setActive(this.index + 1);
  91.                 },
  92.                 prev: function(){
  93.                     return this.setActive(this.index - 1);
  94.                 },
  95.                 $list: $wrapper.find(".m-list-item"),
  96.                 index: 0,
  97.                 $cur: [],
  98.                 setActive: function(i){
  99.                     // 找到第1个 li，并且赋值为 active
  100.                     var $list = this.$list, size = $list.size();
  101.                     if(size <= 0){
  102.                         this.$cur = [];
  103.                         return;
  104.                     }
  105.                     $list.filter(".m-list-item-active").removeClass("m-list-item-active");
  106.                     if(i < 0){
  107.                         i = 0;
  108.                     }else if(i >= size){
  109.                         i = size - 1;
  110.                     }
  111.                     this.index = i;
  112.                     this.$cur = $list.eq(i).addClass("m-list-item-active");
  113.                     this.fixScroll(this.$cur);
  114.                     return this.$cur;
  115.                 },
  116.                 fixScroll: function($elem){
  117.                     // console.log($wrapper);
  118.                     var height = $wrapper.height(), top = $elem.position().top, eHeight = $elem.outerHeight();
  119.                     var scroll = $wrapper.scrollTop();
  120.                     // 因为 li 的 实际　top，应该要加上 滚上 的距离
  121.                     top += scroll;
  122.                     if(scroll > top){
  123.                         $wrapper.scrollTop(top);
  124.                     }else if(top + eHeight > scroll + height){
  125.                         // $wrapper.scrollTop(top + height - eHeight);
  126.                         $wrapper.scrollTop(top + eHeight - height);
  127.                     }
  128.                 },
  129.                 setIndex: function($li){
  130.                     if($li.size() > 0){
  131.                         this.index = this.$list.index($li);
  132.                         $li.addClass("m-list-item-active").siblings().removeClass("m-list-item-active");
  133.                     }else{
  134.                         this.index = 0;
  135.                     }
  136.                 }
  137.             };
  138.  
  139.             // input 的操作
  140.             var operation = {
  141.                 // 文字更变了，更新 li, 最低效率的一种
  142.                 textChange: function(){
  143.                     val = $.trim($input.val());
  144.                     $wrapper.find(".m-list-item").each(function(i, v){
  145.                         if(v.innerHTML.indexOf(val) >= 0){
  146.                             $(v).show();
  147.                         }else{
  148.                             $(v).hide();
  149.                         }
  150.                     });
  151.                     wrapper.show();
  152.                 },
  153.                 // 设值
  154.                 setValue: function($li){
  155.                     if($li && $li.size() > 0){
  156.                         var val = $.trim($li.html());
  157.                         $input.val(val).attr("placeholder", val);
  158.                         wrapper.setIndex($li);
  159.                         $sel.val($li.attr("data-value")).trigger("change");
  160.                     }else{
  161.                         $input.val(function(i, v){
  162.                             return $input.attr("placeholder");
  163.                         });
  164.                     };
  165.                     wrapper.hide();
  166.                     this.offBody();
  167.                 },
  168.                 onBody: function(){
  169.                     var self = this;
  170.                     setTimeout(function(){
  171.                         self.offBody();
  172.                         $body.on("click", self.bodyClick);
  173.                     }, 10);
  174.                 },
  175.                 offBody: function(){
  176.                     $body.off("click", this.bodyClick);
  177.                 },
  178.                 bodyClick: function(e){
  179.                     var target = e.target;
  180.                     if(target != $input[0] && target != $wrapper[0]){
  181.                         wrapper.hide();
  182.                         operation.setValue();
  183.                         operation.offBody();
  184.                     }
  185.                 }
  186.             };
  187.  
  188.             // 遍历 $sel 对象
  189.             function resetOption(){
  190.                 var html = "", val = "";
  191.                 $sel.find("option").each(function(i, v){
  192.                     if(v.selected && !val){
  193.                         val = v.text;
  194.                     };
  195.                     html += '<li class="m-list-item'+ (v.selected ? " m-list-item-active" : "") +'" data-value="'+ v.value +'">'+ v.text +'</li>';
  196.                 });
  197.                 $input.val(val);
  198.                 $wrapper.html(html);
  199.             };
  200.             $sel.on("optionChange", resetOption).trigger("optionChange");
  201.             $sel.on("setEditSelectValue", function(e, val){
  202.                 // console.log(val);
  203.                 var $all = $wrapper.find(".m-list-item"), $item;
  204.                 for(var i = 0, max = $all.size(); i < max; i++){
  205.                     $item = $all.eq(i);
  206.                     if($item.attr("data-value") == val){
  207.                         operation.setValue($item);
  208.                         return;
  209.                     }
  210.                 }
  211.             });
  212.  
  213.             // input 聚焦
  214.             $input.on("focus", function(){
  215.                 this.value = "";
  216.                 operation.textChange();
  217.                 operation.onBody();
  218.             }).on("input propertychange", function(e){
  219.                 operation.textChange();
  220.             }).on("keydown", function(e){
  221.                 // 上 38, 下 40， enter 13
  222.                 switch(e.keyCode){
  223.                     case 38:
  224.                         wrapper.prev();
  225.                         break;
  226.                     case 40:
  227.                         wrapper.next();
  228.                         break;
  229.                     case 13:
  230.                         operation.setValue(wrapper.$cur);
  231.                         break;
  232.                 }
  233.             });
  234.  
  235.             $div.on("click", ".m-input-ico", function(){
  236.                 // 触发 focus 和 blur 事件
  237.                 // focus 是因为 input 有绑定
  238.                 // 而 blur，实际只是失去焦点而已，真正隐藏 wrapper 的是 $body 事件
  239.                 $wrapper.is(":visible") ? $input.blur() : ($input.val("").trigger("focus"));
  240.             });
  241.  
  242.             // 选中
  243.             $wrapper.on("click", ".m-list-item", function(){
  244.                 operation.setValue($(this));
  245.                 return false;
  246.             });
  247.  
  248.             setTimeout(function(){
  249.                 // for ie
  250.                 wrapper.hide();
  251.             }, 1)
  252.  
  253.         });
  254.  
  255.         return this;
  256.     };
  257. })();
  258. </script>
  259.  
  260. <!-- 这段代码，是遍历所有拥有 data-edit-select 属性的元素，并把他们变为可编辑 -->
  261. <script>
  262. // 使用了这个插件，select该怎么用就怎么用
  263. // 任何选择，同样会触发 select 的 更变的说【即select的值会同步更新】
  264. //
  265. var $select = $("select[data-edit-select]").filterSelect();
  266. // --> 这时候的  $select === $("#magicsuggest");
  267. // 也可以 用 $("#magicsuggest").on("change")，两者等价
  268. $select.on("change", function(){
  269.     // console.log(this.value)
  270. });
  271. // 也可以通过 $("#magicsuggest").val() 拿到最新的值
  272. // 通过 $("#magicsuggest").trigger("setEditSelectValue", 2); 设置选中的值为 2
  273. // 通过 $("#magicsuggest").trigger("optionChange") 触发 更新 option 的值
  274. </script>
  275. </html>

源地址:https://blog.csdn.net/linfenpan/article/details/48750889

js,JQuery实现,带筛选,搜索的select的更多相关文章

  1. js/jQuery实现类似百度搜索功能

    一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

  2. 【经验】angularjs 实现带查找筛选功能的select下拉框

    一.背景 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有 ...

  3. js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选

    转载:https://www.cnblogs.com/ooo0/p/6278102.html js jquery 获取元素(父节点,子节点,兄弟节点) 一,js 获取元素(父节点,子节点,兄弟节点) ...

  4. jquery textSearch实现页面搜索 注意！！！！调用这个插件后，js事件绑定如，on、bind、live delegate全部失效，折腾了我一整天！！！

    今天我们介绍的这个插件来着http://www.zhangxinxu.com/wordpress/,张鑫旭的文章写得挺好的,大家有兴趣的多看看. 我们今天的这个插件叫“jquery.textSearc ...

  5. js&jquery 获取select下拉框的值、文本内容、自定义属性

      js&jquery 获取select下拉框的值.文本内容.自定义属性 CreationTime--2018年7月2日09点22分 Author:Marydon html <selec ...

  6. js生成二维码（jquery自带）

    //引入js<script type="text/javascript" src="js/jquery.js"></script> &l ...

  7. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  8. js/jQuery使用过程中常见问题

    目录 一.jQuery选择器选择选中的或者disabled的选择框时attr函数无效 二.jQuery each函数的break/continue 三.jQuery 获取元素的left会值/left数 ...

  9. js/jquery/html前端开发常用到代码片段

    1.IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE ...

随机推荐

  1. Mysql 数据库增删改查

    数据插入 语法:INSERT INTO Table_name(field1,field2……fieldN) values(value1,vlaue2,…valueN) 单行插入用户类型 INSERT ...

  2. tornado的异步效果

    第一种方式: import tornado.ioloop import tornado.web from tornado import gen from tornado.concurrent impo ...

  3. python 安装mysql报错

    原 安装Python mysqlclient出现“OSError: mysql_config not found”错误 2016年06月01日 12:15:11 wangtaoking1 阅读数:11 ...

  4. Java插入排序算法

    直接插入排序算法 基本思想: 把n个待排序的元素看成一个有序表和一个无序表,开始时有序表中只有一个元素,无序表中有n-1个元素:排序过程即每次从无序表中取出第一个元素,将它插入到有序表中,使之成为新的 ...

  5. 微信video最上层解决问题

    /*  http://blog.csdn.net/kepoon/article/details/53608190  */ //x5-video-player-type="h5" x ...

  6. python HTML报告

    http://www.cnblogs.com/puresoul/p/7490737.html # coding:utf-8import timeimport unittestimport HTMLTe ...

  7. spring各版本jar包和源码

    spring各版本jar包和源码 spring历史版本源码:https://github.com/spring-projects/spring-framework/tags spring历史jar包和 ...

  8. U盘权限不足，只读文件系统

    https://blog.csdn.net/baocheng_521/article/details/77161791 用第一种方式成功

  9. index_select ，clamp，detach

    1.torch.clamp(input,min,max,out=None)-> Tensor 将input中的元素限制在[min,max]范围内并返回一个Tensor 2.index_selec ...

  10. 第一次Java测试及感触

    周四进行了java测试,感触很深,测试的题目是用Java实现一个ATM机的管理系统.最后3个小时后,我没有完成这次测试,但是我找到了自己的很多不足,明确了自己的问题究竟在哪里. 关于这次测试我不会的最 ...