Angular 下拉搜索框实现

今天有个需求要写一个下拉搜索框，本来是下拉框的，由于内容太多，所以添加一个查找功能。根据博客进行改写的。参考了他的基本框架进行实现。

效果图：

在这里插入图片描述

输入框右边的白色箭头图片下载地址

<td>xxxxxxx</td>
<td style="text-align:left"><div style="background:#2c4b76;padding:0px"><div class="btn-group bootstrap-select fit-width" #menu1><input name="optionsToDisplay" id="optionsToDisplay" type="text" class="form-cotnrol" style="height: 23px;width: 237px" #optionsToDisplayClass="ngModel" (input)="onFilter($event,menu)" data-toggle="dropdown" [ngModel]="selectValue?.name"  autocomplete="off"/><img src="assets/images/bottomangle.png" style="z-index: 1;position: fixed;margin-left:0px;border:1px;border-color:#767676" data-toggle="dropdown"><div class="dropdown-menu open" style="width: 256px"><ul class="dropdown-menu inner"><li *ngIf="measureTypesToShow==null || measureTypesToShow.length==0"><a>没有内容</a></li><li *ngFor="let item1 of measureTypesToShow,let i=index"><a #a1 id="{{item1.id}}" (click)="activeValueToType(menu1,a1,$event)">{{item1.name}}</a></li></ul></div></div></div></td>

    //过滤字符，进行菜单的搜索onFilterToType(event,e: HTMLElement): void {if (!e.classList.contains("open")) {e.classList.add("open");}if(this.measureTypesToShow && this.measureTypesToShow.length){this.measureTypesToShow.length = 0;}//对输入的字符进行非空限制let inputValue = event.target.value;this.selectValueToType.name = inputValue;// this.setMersureTypeID();if (inputValue && inputValue.length) {this.filterValueToType = inputValue;this.measureTypesToShow = this.activateFilterToType();} else {this.filterValueToType = null;this.measureTypesToShow = this.measureTypes.concat();}this.doSelectValueToType();}

模糊查找

    activateFilterToType() {if (this.measureTypes && this.measureTypes.length) {let temp:data[] = [];for (let measureTypes1 of this.measureTypes) {if (measureTypes1.name.toUpperCase().includes(this.filterValueToType.toUpperCase())){temp.push(measureTypes1);}}return temp;}}

用来做校验的，判断如果直接输入后并没有点击下拉菜单的内容，会导致赋值失败，所以需要判断一下是否没点击

    public doSelectValueToType(){let flag = true;if (this.measureTypes.map(item=>{return item.name;}).includes(this.selectValueToType.name)){flag = false;}if (flag) {this.errorMessage3 = "请选择正确的xxxxxxxxx！";} else {this.errorMessage3 = "";}}

    //选中菜单时activeValueToType(e: HTMLElement, a: HTMLElement, event: Event) {// console.log(a.innerText);if (a.id == null || a.id == "") {this.selectValueToType.name = a.innerText;this.selectValueToType.id = a.id;this.select.emit(this.selectValueToType);return;}this.selectValueToType.name = a.innerText;this.selectValueToType.id = a.id;this.setMersureTypeID();if (e.classList.contains("open")) {e.classList.remove("open");} else {e.classList.add("open");}event.stopPropagation();this.select.emit(this.measureType);this.doSelectValueToType();}

    setMersureTypeID() {this.info.measureTypeID = this.selectValueToType.id;this.info.type = this.selectValueToType.name;}

同时需要加上css

.select input.key {width: 100%;height: 30px;border: 1px solid #ddd;margin: 0;background-position: 95% center;}.select .content {display: block;width: 80%;/*max-height: 200px;*/border-left: 1px solid #ddd;border-bottom: 1px solid #ddd;border-right: 1px solid #ddd;}.select .content p {border-top: 1px solid #ddd;margin: 0px;padding: 5px;background-color: #D2D2D2;}.select .content .search {background-color: #fff;}.select .search > input {width: 98%;height: 25px;border-radius: 5px;border: 1px solid #ddd;background-position: 95% center;}.select .content .option {overflow-y: auto;max-height: 100px;}/*!* Bootstrap-select v1.12.2 (http://silviomoreto.github.io/bootstrap-select)** Copyright 2013-2017 bootstrap-select* Licensed under MIT (https://github.com/silviomoreto/bootstrap-select/blob/master/LICENSE)*/.bootstrap-select {width: 220px \0;/*IE9 and below*/}.bootstrap-select > .dropdown-toggle {width: 100%;padding-right: 25px;z-index: 1;}.bootstrap-select > .dropdown-toggle.bs-placeholder,.bootstrap-select > .dropdown-toggle.bs-placeholder:hover,.bootstrap-select > .dropdown-toggle.bs-placeholder:focus,.bootstrap-select > .dropdown-toggle.bs-placeholder:active {color: #999;}.bootstrap-select > select {position: absolute !important;bottom: 0;left: 50%;display: block !important;width: 0.5px !important;height: 100% !important;padding: 0 !important;opacity: 0 !important;border: none;}.has-error .bootstrap-select .dropdown-toggle,.error .bootstrap-select .dropdown-toggle {border-color: #b94a48;}.bootstrap-select.fit-width {width: auto !important;}.bootstrap-select.form-control {margin-bottom: 0;padding: 0;border: none;}.bootstrap-select.form-control.input-group-btn {z-index: auto;}.bootstrap-select.form-control.input-group-btn:not(:first-child):not(:last-child) > .btn {border-radius: 0;}.form-inline .bootstrap-select.btn-group,.form-horizontal .bootstrap-select.btn-group,.form-group .bootstrap-select.btn-group {margin-bottom: 0;}.form-group-lg .bootstrap-select.btn-group.form-control,.form-group-sm .bootstrap-select.btn-group.form-control {padding: 0;}.form-group-lg .bootstrap-select.btn-group.form-control .dropdown-toggle,.form-group-sm .bootstrap-select.btn-group.form-control .dropdown-toggle {height: 100%;font-size: inherit;line-height: inherit;border-radius: inherit;}.form-inline .bootstrap-select.btn-group .form-control {width: 100%;}.bootstrap-select.btn-group.bs-container .dropdown-menu {z-index: 1060;}.bootstrap-select.btn-group .dropdown-toggle .caret {position: absolute;top: 50%;right: 12px;margin-top: -2px;vertical-align: middle;}.bootstrap-select.btn-group[class*="col-"] .dropdown-toggle {width: 100%;}.bootstrap-select.btn-group .dropdown-menu {min-width: 100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}.bootstrap-select.btn-group .dropdown-menu.inner {position: static;float: none;border: 0;padding: 0;margin: 0;border-radius: 0;-webkit-box-shadow: none;box-shadow: none;overflow-y: auto;max-height: 150px;max-width: 300px;}.bootstrap-select.btn-group .dropdown-menu li {position: relative;}.bootstrap-select.btn-group .dropdown-menu li a {cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}.bootstrap-select.btn-group .dropdown-menu li a span.text {display: inline-block;}.bootstrap-select.btn-group .dropdown-menu li small {padding-left: 0.5em;}.bootstrap-select.btn-group.fit-width .dropdown-toggle .caret {position: static;top: auto;margin-top: -1px;}.bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text {margin-right: 34px;}.bs-actionsbox .btn-group button {width: 50%;}.bs-donebutton .btn-group button {width: 100%;}.bs-searchbox + .bs-actionsbox {padding: 0 8px 4px;}.bs-searchbox .form-control {margin-bottom: 0;height: 80%;padding-top: 3px;padding-bottom: 3px;width: 100%;float: none;}.font-cousm {font-size: 15px;}