Angular 下拉搜索框实现

雨点打透心脏的1/2处 2022-12-14 03:58 371阅读 0赞

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

#### 效果图： ####

![在这里插入图片描述][20201013113636496.png_pic_center]  
![在这里插入图片描述][20201013113934914.png_pic_center]  
![在这里插入图片描述][20201013114032520.png_pic_center]  
[输入框右边的白色箭头图片下载地址][Link 2]

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

[Link 1]: https://blog.csdn.net/wgp15732622312/article/details/77150051
[20201013113636496.png_pic_center]: /images/20221123/16a4232c97124501bac037c32c291d97.png
[20201013113934914.png_pic_center]: /images/20221123/9c29a3e893e44517bfe46f4c2583dad0.png
[20201013114032520.png_pic_center]: /images/20221123/61bcaec051dc4d50a6f00ef7c88b2b24.png
[Link 2]: https://download.csdn.net/download/weixin_43736084/12921175