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;
        }