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

随机推荐

springboot：集成fastjson（教训）
网上有很多介绍,主要有两种. 1.在启动类中注入bean /** * 集成fastjson * * @return */ @Bean public HttpMessageConverters fast ...
Windows平台下，Java性能分析工具VisualVM的Tomcat8的配置
VisualVM在JDK6版本及以上已经自带这个应用. 位置:C:\Program Files (x86)\Java\jdk1.8.0_60\bin\jvisualvm.exe 在Windows环 ...
38)django-组合搜索
一:组合搜索组合搜索可以用来实现快速查询.效果图举例.瓜子网站选车注意:URL中的地址0-0什么的是传递的参数的值. 二:实现组合搜索组合实现条件 1)有外键或者多对多多关系 2)有choice ...
安卓易学，爬坑不易—腾讯老司机的RecyclerView局部刷新爬坑之路
前言安卓开发者都知道,RecyclerView比ListView要灵活的多,但不可否认的里面的坑也同样埋了不少人.下面让我们看看腾讯开发工程师用实例讲解自己踩坑时的解决方案和心路历程. 话说有图有真 ...
Confluence 6 警告的类型
有下面的一些类型的警告. 警告和知识库(Alert and KB) 级别(Level) 默认阈值(Default threshold) 可配置(Configurable) Low free disk ...
MySQL外键使用详解
一.基本概念 1.MySQL中“键”和“索引”的定义相同,所以外键和主键一样也是索引的一种.不同的是MySQL会自动为所有表的主键进行索引,但是外键字段必须由用户进行明确的索引.用于外键关系的字段必须 ...
JPA核心类与使用
点击访问:JPA环境配置(一) Persistence: Persistence用于获取EntityManagerFactory实例,这个类中包含一个名为createEntityManagerFact ...
编辑后保留原URl搜索条件
首先需要知道的一个知识点: 1.request.GET是一个QueryDict类型的,要想取出?后面的结构就用request.GET.urlencode() 2.request.GET默认是不可修改的 ...
【深度学习】吴恩达网易公开课练习(class1 week2)
知识点汇总作业内容:用logistic回归对猫进行分类 numpy知识点: 查看矩阵维度: x.shape 初始化0矩阵: np.zeros((dim1, dim2)) 去掉矩阵中大小是1的维度: ...
古代猪文：数论大集合：欧拉定理，exgcd，china，逆元，Lucas定理应用
/* 古代猪文:Lucas定理+中国剩余定理 999911658=2*3*4679*35617 Lucas定理:(m,n)=(sp,tp)(r,q) %p 中国剩余定理:x=sum{si*Mi*ti} ...

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

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

随机推荐

热门专题