山西建网站,做网站合同范本,互联网营销师证书报名入口,生产 管理 软件 erp今天有个需求要写一个下拉搜索框#xff0c;本来是下拉框的#xff0c;由于内容太多#xff0c;所以添加一个查找功能。根据博客进行改写的。参考了他的基本框架进行实现。
效果图#xff1a; 输入框右边的白色箭头图片下载地址
tdxxxxxxx/td
td sty…今天有个需求要写一个下拉搜索框本来是下拉框的由于内容太多所以添加一个查找功能。根据博客进行改写的。参考了他的基本框架进行实现。
效果图 输入框右边的白色箭头图片下载地址
tdxxxxxxx/td
td styletext-align:leftdiv stylebackground:#2c4b76;padding:0pxdiv classbtn-group bootstrap-select fit-width #menu1input nameoptionsToDisplay idoptionsToDisplay typetext classform-cotnrol styleheight: 23px;width: 237px #optionsToDisplayClassngModel (input)onFilter($event,menu) data-toggledropdown [ngModel]selectValue?.name autocompleteoff/img srcassets/images/bottomangle.png stylez-index: 1;position: fixed;margin-left:0px;border:1px;border-color:#767676 data-toggledropdowndiv classdropdown-menu open stylewidth: 256pxul classdropdown-menu innerli *ngIfmeasureTypesToShownull || measureTypesToShow.length0a没有内容/a/lili *ngForlet item1 of measureTypesToShow,let iindexa #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;}
