带检索功能angular的下拉多选功能的实现
html部分
<input type="text" class="form-control text-left" style="position:absolute;" ng-click="vm.inputClick()" ng-change="vm.inputNewChange()" ng-blur=" vm.outBlu()" ng-model="vm.diagnosis" placeholder=" 确认诊断" required />
<div id="ull" class="form-control text-left" style=" z-index:1000; padding:0px; margin-top:32px; position:absolute; height:auto;">
<div class=" text-left" ng-show="vm.lishow==1" ng-click="vm.liClick(item)" onMouseOver="this.style.background = '#3598dc'; this.style.color = '#ffffff';" onMouseOut="this.style.background = 'transparent '; this.style.color = '#555';"style=" border:0px; margin-left:12px; padding:3px 0px 3px 0px; list-style-type:none; z-index:1000; " ng-repeat="item in vm.diagnosisObj" >{{ item.name}}
</div>
</div>
js部分 这里的 vm是this的意思可以转换成$scope
//下拉部分的列表信息,这边的格式是 {[name:"1111"],[name:"22222"]}
help.getDropDownList({
tableName: "BasicDisease",
columnName: "DiseaseName"
}).success(function (data) {
vm.diagnosisObj = data.data;
vm.shitiAll = vm.diagnosisObj;
});
//去重处理
function dedupe(array) {
return Array.from(new Set(array));
};
//最新下拉选框click
vm.liClick = function (item) {
vm.tema = [];
if (!vm.diagnosis || vm.diagnosis == "") {
vm.diagnosis = item.name;
}
else {
vm.diagnosis = vm.diagnosis + "," + item.name;
vm.quchong = vm.diagnosis.split(",");
vm.diagnosis = dedupe(vm.quchong).toString();
for (var i = 0; i < vm.quchong.length; i++) {
vm.tema[i] = 0;
for (var j = 0; j < vm.shitiAll.length; j++) {
if (vm.shitiAll[j].name == vm.quchong[i]) {
vm.tema[i] = 1;
}
}
};
for (var h = 0; h < vm.tema.length; h++) {
if (vm.tema[h] == 0) {
vm.quchong.splice(h, 1);
}
};
vm.diagnosis = dedupe(vm.quchong).toString();
};
vm.lishow = 0;
}
//最新inputclick
vm.inputClick = function () {
vm.lishow = 1;
}
//最新变化
vm.inputNewChange = function () {
vm.lishow = 1;
if (vm.diagnosis) {
vm.diagnosisObj = vm.shitiAll;
vm.diagnosis = vm.diagnosis.replace(/,/ig, ',');
vm.temp = vm.diagnosis.split(",");
var lengthss = vm.temp.length - 1;
var index = vm.diagnosis.lastIndexOf(",");
var aaa = vm.diagnosis.substring(index + 1, vm.diagnosis.length);
var keyWord = aaa;
vm.lishow = 1;
var len = vm.diagnosisObj.length;
var arr = [];
for (var i = 0; i < len; i++) {
if (vm.diagnosisObj[i].name.indexOf(keyWord) >= 0) {
arr.push(vm.diagnosisObj[i]);
}
}
vm.diagnosisObj = arr;
}
else {
vm.diagnosisObj = vm.shitiAll;
}
if (vm.diagnosis == "") { vm.diagnosisObj = vm.shitiAll; }
};
最终的样式见图