带检索功能angular的下拉多选功能的实现

带检索功能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; }
                };

最终的样式见图