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 ...

随机推荐

【原创】大数据基础之Kerberos（1）简介、安装、使用
kerberos5-1.17 官方:https://kerberos.org/ 一简介 The Kerberos protocol is designed to provide reliable a ...
调整linux进程优先级
使用环境当服务器资源比较紧张的时候,可以通过调整优先级来优先处理某个进程的请求查看进行优先级(top) 优先级由 -20~19这个范围来表示优先级大小,数值越小,优先级越高, 设置方法: 使用re ...
Tornado学习笔记(一) helloword/多进程/启动参数
前言当你觉得你过得很舒服的时候,你肯定没有在进步.所以我想学习新的东西,然后选择了Tornado.因为我觉得Tornado更匹配目前的我的综合素质. Tornado学习笔记系列主要参考<int ...
关于const修饰指针
const修饰指针,一般分为如下四种情况: int b = 500; const int *a = &b; //情况1 int const *a = &b // 2 ...
nginx官方模块之http_sub_status_module
作用显示nginx的连接状态,nginx客户端状态配置语法配置
MySQL外键使用详解
一.基本概念 1.MySQL中“键”和“索引”的定义相同,所以外键和主键一样也是索引的一种.不同的是MySQL会自动为所有表的主键进行索引,但是外键字段必须由用户进行明确的索引.用于外键关系的字段必须 ...
LeetCode（102）：二叉树的层次遍历
Medium! 题目描述: 给定一个二叉树,返回其按层次遍历的节点值. (即逐层地,从左到右访问所有节点). 例如:给定二叉树: [3,9,20,null,null,15,7], 3 / \ 9 20 ...
Nginx详解十六：Nginx场景实践篇之缓存服务
缓存类型: 服务端缓存代理缓存客户端缓存 Nginx代理缓存配置语法使用之前需要先定义一个proxy_cache_path配置语法:proxy_cache_path path [levels= ...
C++ Primer 笔记——数组
1.数组的大小是固定不变的,声明时必须指定大小(或者使用列表初始化),而且大小必须大于0,C++ Primer里面也建议,如果不确定元素的个数,请使用vector. ]; , , }; //数组长度固 ...
C++ friend友元函数和友元类（转）
一个类中可以有 public.protected.private 三种属性的成员,通过对象可以访问 public 成员,只有本类中的函数可以访问本类的 private 成员.现在,我们来介绍一种例外情 ...

js,JQuery实现,带筛选,搜索的select

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

随机推荐

热门专题