可输入也可选择的下拉框（单选或输入）

因为要达到可以输入不是下拉框中的项（代表要新加的项）
如果想选择原有的项也是可以的，练习一下jQuery插件的写法

    


        *{margin:0; padding:0;}
        ul,li{list-style:none;}
        :focus{outline: none;}
        input[type=text]{border:1px solid #ccc;}
        input[type=text]:hover,input[type=text]:focus{border-color: #57bc80; box-shadow: none;}
        
        body{padding:50px; font-size: 12px;}
        .my-select-box{position: relative;}
        .my-select-box .my-select-input{ height: 24px; line-height: 24px; padding:0 5px;
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAG2YAABzjgAA4DIAAIM2AAB5CAAAxgwAADT6AAAgbL5TJ5gAAABGSURBVHjaYvz//z8DOYCJgUzA0tnZidPK8vJyRpw24pLEpwnuVHRFhDQxMDAwMPz//x+OOzo6/iPz8WFGuocqAAAA//8DAD/sORHYg7kaAAAAAElFTkSuQmCC) right center no-repeat;
            padding-right:20px !important;
            width:100%;
            box-sizing: border-box;
        }
        .my-select-box .my-select-list{position:absolute; left:0; z-index: 101; border:1px solid #ccc; border-top:none; max-height: 120px; overflow-y: auto; display: none; background: #fff; width:100%; box-sizing: border-box;}
        .my-select-box .my-select-list li{height: 22px; line-height: 22px; padding:0 3px; cursor:pointer; margin-bottom: 1px}
        .my-select-box .my-select-list li.choosed{background: #ccc; color:#fff;}
        .my-select-box .my-select-list li:hover{background: #ccc; color:#fff;}
    

        

第一项
            
第二项
            
第三项
            
第四项
            
第5项
            
第6项
            
第7项
            
第8项
        

    

    

        

第一项
            
第二项
            
第三项
            
第四项
            
第5项
            
第6项
            
第7项
            
第8项
        

        
        ;(function($){
            $.fn.MySelect=function(){
                this.each(function(){
                    var $box=$(this);
                    var $input=$box.find("input.my-select-input");  //输入框
                    var $list=$input.next();                          //ul装扮成下拉框
                    var inputHeight=$input.outerHeight();   //计算input输入框的高度和宽度，方便定位ul和设置ul及包裹元素的宽度
                    //var inputWidth=$input.innerWidth();
                    $list.css({"top":(inputHeight)});
                    //$box.width($input.outerWidth());

                    $input.focus(function(){   //输入框获得焦点后，显示下拉选择ul
                        var $nextUl=$(this).next();
                        if($nextUl.children().length>0){
                            $(this).next().show();
                        }           
                    }).bind('input propertychange',function(){  //绑定监测输入框的输入值更改
                        var $this=$(this);
                        $this.attr("data-id","");
                        var curText=$this.val();
                        var $nextUl=$(this).next();
                        if($nextUl.children().length>0){
                            $nextUl.find("li").removeClass("choosed");
                            $nextUl.find("li").each(function(i,item){
                                var txt=$(item).text();                 
                                if(txt===curText){
                                    var v=$(item).attr("data-value");
                                    $this.attr("data-id",v);
                                    $(item).addClass("choosed");
                                }
                            });
                        }
                    });
                    //$list.find("li").click(function () {
                    //    var $this = $(this);
                    //    var value = $this.attr("data-value") || '';
                    //    $input.val($this.text()).attr("data-id", value);
                    //    $this.addClass("choosed").siblings().removeClass("choosed");
                    //    $this.parent().hide();
                    //});
                    //修改成如下事件绑定，为了给动态添加的li也可以产生点击效果
                    $list.off('click', 'li').on('click', 'li', function (e) {
                        var $this = $(this);
                        var value = $this.attr("data-value") || '';
                        $input.val($this.text()).attr("data-id", value);
                        $this.addClass("choosed").siblings().removeClass("choosed");
                        $this.parent().hide();
                    });         
                });

                $(document).click(function (e) {  //点击.my-select-box范围外时隐藏ul下拉框
                    var target=e.target;
                    var $target=$(target);
                    var $parent=$target.closest('.my-select-box');
                    if($parent.length<1){  //说明不是.my-select-box范围内点击，将ul隐藏
                        $(".my-select-list").hide();
                    }else if($parent.length==1){  //如果存在多个my-select-box的情况，将其余的非这项以外的都隐藏
                        var $ul=$parent.find(".my-select-list");
                        var flag=$ul.is(":hidden");
                        $(".my-select-list").hide();
                        if(!flag) $ul.show();
                    }
                });
                return this;
            }
        })(jQuery);

        $(".my-select-box").MySelect();
    

Paste_Image.png