因?yàn)橐_(dá)到可以輸入不是下拉框中的項(xiàng)（代表要新加的項(xiàng)）
如果想選擇原有的項(xiàng)也是可以的，練習(xí)一下jQuery插件的寫法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定義下拉選擇框</title>
<style type="text/css">
*{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;}
</style>
</head>
<body>
<div class="my-select-box" style="width:300px;">
<input type="text" class="my-select-input" placeholder="可輸入也可選擇" maxlength="20" />
<ul class="my-select-list">
<li data-value="1">第一項(xiàng)</li>
<li data-value="2">第二項(xiàng)</li>
<li data-value="3">第三項(xiàng)</li>
<li data-value="4">第四項(xiàng)</li>
<li data-value="5">第5項(xiàng)</li>
<li data-value="6">第6項(xiàng)</li>
<li data-value="7">第7項(xiàng)</li>
<li data-value="8">第8項(xiàng)</li>
</ul>
</div>
<div style="height: 30px"></div>
<div class="my-select-box">
<input type="text" class="my-select-input" placeholder="可輸入也可選擇" maxlength="20" />
<ul class="my-select-list">
<li data-value="1">第一項(xiàng)</li>
<li data-value="2">第二項(xiàng)</li>
<li data-value="3">第三項(xiàng)</li>
<li data-value="4">第四項(xiàng)</li>
<li data-value="5">第5項(xiàng)</li>
<li data-value="6">第6項(xiàng)</li>
<li data-value="7">第7項(xiàng)</li>
<li data-value="8">第8項(xiàng)</li>
</ul>
</div>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script>
;(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(); //計(jì)算input輸入框的高度和寬度，方便定位ul和設(shè)置ul及包裹元素的寬度
//var inputWidth=$input.innerWidth();
$list.css({"top":(inputHeight)});
//$box.width($input.outerWidth());
$input.focus(function(){ //輸入框獲得焦點(diǎn)后，顯示下拉選擇ul
var $nextUl=$(this).next();
if($nextUl.children().length>0){
$(this).next().show();
}
}).bind('input propertychange',function(){ //綁定監(jiān)測(cè)輸入框的輸入值更改
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();
//});
//修改成如下事件綁定，為了給動(dòng)態(tài)添加的li也可以產(chǎn)生點(diǎn)擊效果
$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) { //點(diǎn)擊.my-select-box范圍外時(shí)隱藏ul下拉框
var target=e.target;
var $target=$(target);
var $parent=$target.closest('.my-select-box');
if($parent.length<1){ //說明不是.my-select-box范圍內(nèi)點(diǎn)擊，將ul隱藏
$(".my-select-list").hide();
}else if($parent.length==1){ //如果存在多個(gè)my-select-box的情況，將其余的非這項(xiàng)以外的都隱藏
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();
</script>
</body>
</html>
Paste_Image.png
