例如,领导姓名字段:
点击后弹出下拉列表,支持模糊搜索
同时支持多选
代码实现:
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是去后台获取下拉选项的数据。