页面实现模糊检索下拉列表功能（可多选）

例如，领导姓名字段：

 点击后弹出下拉列表，支持模糊搜索

同时支持多选

 

 代码实现：

html代码

                   <div class="col-sm-7  modal-inp-wrp">
                         <!--多选-->
                         <div class="inp-srch-wrap s-p">
                             <input class="inp-hidden core-id clear-inp"  value="" id="LEAD_ID" name="LEAD_ID" type="hidden"/>
                             <input readonly="readonly"
                                    value=""
                                    class="date-bg req-cont-1 required-val form-control inp-search inp-v txt-cut clear-inp"
                                    onclick="showContainer(this)"/>
                             <div class="cus-like-wrap">
                                 <input placeholder="请输入查询关键字"
                                        class="form-control inp-search input-srch"
                                        onclick="likeStdWHP(this)"
                                        onkeyup="enterSrchWHP(this)"/>
                                 <ul class="cus-sltd-ul">
                                 </ul>
                             </div>
                         </div>
                     </div>

css代码

.inp-srch-wrap{
    width: 100%;
    position: relative;
}
.cus-like-wrap{
    position: absolute;
    padding: 10px;
    display: none;
    width: 100%;
    left: 0;
    z-index: 1000;
    background: #fff;
    border: 1px solid #046CD1;
}
.cus-like-wrap.active{display:block;}
.cus-sltd-ul{
    max-height: 200px;
    overflow-y: auto;
}
.sltd-item {
    padding: 5px 0;
    border-bottom: 1px dashed #046CD1;
    cursor: pointer;    text-align: left;
}
.sub-sltd-ul{

}
.sub-sltd-item{
    padding: 5px 0 5px 20px;
    border-bottom: 1px dashed #ccc;
    cursor: pointer;
    text-align: left;
}
.sltd-item.active,.sub-sltd-item.active{
    background: #C7DEF9;
}

js代码

var selectedArr=[];
var selectTxtArr=[];
 function showContainer(obj) {
	selectedArr.length=0;
	selectTxtArr.length=0;
	$('.cus-like-wrap').removeClass('active');
	$(obj).closest('.inp-srch-wrap').find('.input-srch').val('');
	$(obj).closest('.inp-srch-wrap').find('.cus-like-wrap').addClass('active');
	$(obj).closest('.inp-srch-wrap').find('.input-srch').click();
	//反选
	var sltIdStr=$.trim($(obj).closest('.inp-srch-wrap').find('.inp-hidden').val());
	if(sltIdStr){
		selectedArr=sltIdStr.split(',');
		selectTxtArr=$(obj).closest('.inp-srch-wrap').find('.inp-v').val().split(',');
	}
	for(var i=0;i<selectedArr.length;i++){
		$(obj).closest('.inp-srch-wrap').find('.sltd-item[data-id="'+selectedArr[i]+'"]').addClass('active');
	}

}
function enterSrchWHP(obj) {
	var ev = window.event || arguments.callee.caller.arguments[0];
	if (ev.keyCode == 13) {
		likeStdWHP(obj);
	}
}
//模糊查询
function likeStdWHP(obj) {
	var ev = window.event || arguments.callee.caller.arguments[0];
	stopPropagationEvent(ev);
	var txt = $.trim($(obj).val());
	var str = '';
	$(obj).closest('.inp-srch-wrap').find('.cus-sltd-ul').html(str);
	$.ajax({
		url: 'getSecurityPersonDropDown.do',
		type: 'post',
		async: false,
		data: {NAME : txt},
		success: function (data) {
			var dataArr = data.WebPage.Data.OptReturnData.OptRetData.NewDataSet.Table;
			var qyArr = [];
			var restStr='';
			if (dataArr && (Object.prototype.toString.call(dataArr).slice(8, -1) == 'Object')) {
				qyArr.push(dataArr);
			} else if (dataArr && dataArr.length) {
				qyArr = dataArr.slice(0);
			}
			restStr=getLi1(obj,qyArr);
			str+=restStr;
			if (!str) {
				str += '<li class="sltd-item clearfix">未匹配到任何数据</li>';
			}
			$(obj).closest('.inp-srch-wrap').find('.cus-sltd-ul').html(str);
			//反选
			var sltIdStr=$.trim($(obj).closest('.inp-srch-wrap').find('.inp-hidden').val());
			if(sltIdStr){
				selectedArr=sltIdStr.split(',');
				selectTxtArr=$(obj).closest('.inp-srch-wrap').find('.inp-v').val().split(',');
			}
			for(var i=0;i<selectedArr.length;i++){
				$(obj).closest('.inp-srch-wrap').find('.sltd-item[data-id="'+selectedArr[i]+'"]').addClass('active');
			}

		}, error: function (a, b, c) {
		}
	});
}
function getLi1(obj,qyArr){
	var str='';
	for(var i=0;i<qyArr.length;i++){
		str+='<li    class="sltd-item clearfix" onclick="likedItmSltedWHP(this)" ' +
			'data-id="'+qyArr[i].ID+'" >'+qyArr[i].NAME+'</li>';
	}
	return str
}


function likedItmSltedWHP(obj, id) {
	//模糊查询选中
	var ev = window.event || arguments.callee.caller.arguments[0];
	stopPropagationEvent(ev);
	var dataId = $(obj).attr('data-id');
	var dataVal=$.trim($(obj).text());
	var idx=selectedArr.indexOf(dataId);

		$(obj).toggleClass('active');
		if($(obj).hasClass('active')){
			if(idx==-1){
				selectedArr.push(dataId);
				selectTxtArr.push(dataVal);
			}
		}else{
			if(idx>-1){
				selectedArr.splice(idx,1);
				selectTxtArr.splice(idx,1);
			}
		}

	$(obj).closest('.inp-srch-wrap').find('.inp-hidden').val(selectedArr.join(','));
	$(obj).closest('.inp-srch-wrap').find('.inp-v').val(selectTxtArr.join(','));
}
$(document).on('click',function(e){
	var e=e||event;
	if((!$(e.target).closest('.inp-srch-wrap').hasClass('s-p'))){
		$('.cus-like-wrap').removeClass('active');
	}
})

请求getSecurityPersonDropDown.do是去后台获取下拉选项的数据。