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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/437465.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

新手前端练手网站_编程到底难不难学？新手入门选择哪种语言好？

新手前端练手网站_编程到底难不难学？新手入门选择哪种语言好？

以下内容适合的读者&#xff1a;想要学习编程的小白一.编程到底难不难学&#xff1f;对于这个问题我的回答是不知道&#xff0c;学会了编程的人会说好学&#xff0c;中途就放弃的人会说很难&#xff0c;任何知识想要掌握好都不是一件容易的事情。所以我决定用自己的实际行动来证…
阅读更多...
【转】刨根究底字符编码之八——Unicode编码方案概述

【转】刨根究底字符编码之八——Unicode编码方案概述

Unicode编码方案概述 1. 前面讲过&#xff0c;随着计算机发展到世界各地&#xff0c;于是各个国家和地区各自为政&#xff0c;搞出了很多既兼容ASCII但互相之间又不兼容的各种编码方案(微软统一称之为ANSI编码&#xff0c;具体体现为各种ANSI代码页)。 这样一来&#xff0c;同…
阅读更多...
Angular 自定义属性指令-禁止input框输入空格-以及删除复制内容中的空格

Angular 自定义属性指令-禁止input框输入空格-以及删除复制内容中的空格

创建一个ts文件&#xff0c;并在module.ts中定义 import { Directive, ElementRef, HostListener, Input } from angular/core; import { FormGroup, FormControl, NgControl } from angular/forms; Directive({selector: [input-noSpace]}) export class NoSpace {constructo…
阅读更多...
基于androidx的快速开发框架_Vue企业级优雅实战07框架开发03封装基于MockJS的模拟数据...

基于androidx的快速开发框架_Vue企业级优雅实战07框架开发03封装基于MockJS的模拟数据...

预览本文的实现效果&#xff1a;# giteegit clone gitgitee.com:cloudyly/dscloudy-admin-single.git# githubgit clone gitgithub.com:cloudyly/dscloudy-admin-single.gitgit checkout 05_MockJS本文主要内容&#xff1a;基于 Mock JS&#xff0c;优雅设计网络请求的模拟数据…
阅读更多...
【转】Net Framework,Net Core 和 Net Standard 区别

【转】Net Framework,Net Core 和 Net Standard 区别

前几天我在一个群里看到有关这方面的讨论&#xff0c;最后感觉讨论的不是很清晰&#xff0c;有幸的是我们的项目去年就开始迁移NetCore的调研了&#xff0c;我个人多多少少也是有过这方面的研究。下面我将说一下我自己对着三个的认识如果有不足的地方&#xff0c;请大家指出。 …
阅读更多...
记录一次SQL优化，增加索引，随便写的当笔记了

记录一次SQL优化，增加索引，随便写的当笔记了

写了一个SQL&#xff0c;前端往返时间大约1.7秒&#xff0c;最终优化到一共150毫秒左右&#xff0c;应该还可以更好一些 下面说的有点乱&#xff0c;有空再好好总结一下吧。参考文章里面写的还是比较好的&#xff0c;只不过没有组合查询。 参考链接&#xff1a;https://zhuan…
阅读更多...
使用函数求最大公约数 pta_高中数学选修教材2-导数第6课时《函数的单调性与导数》教学设计...

使用函数求最大公约数 pta_高中数学选修教材2-导数第6课时《函数的单调性与导数》教学设计...

选修2-2第一章1.3.1 函数的单调性与导数一、先复习一下&#xff0c;上节课讲到了利用导数求曲线的切线方程(点我)&#xff0c;咱们这节课接着讲利用导数判断函数的单调性。二、做出图像形象生动&#xff0c;让学生看到当斜率为正(亦是导数为正)的时候函数图像是上升的&#xff…
阅读更多...
Kafka幂等性与事务

Kafka幂等性与事务

kafka幂等性 博客https://www.cnblogs.com/smartloli/p/11922639.html 幂等性&#xff1a; 主要解决单会话&#xff08;producer宕机重启幂等性失效&#xff09; 主要是引入了ProducerID和SequenceNumber来实现幂等性 &#xff0c;当producer发送消息给broker后等待返回ack&…
阅读更多...
【转】C#中枚举类型与静态变量

【转】C#中枚举类型与静态变量

C#中enum类型&#xff0c;相较于其他基本数据类型来说比较特殊&#xff0c;他的本质上是一堆整数组成的结构体&#xff0c;并且支持与整型的显式转化。 既然是枚举类型&#xff0c;那么也就是说enum中的变量是不可以轻易改变的&#xff0c;所以C#将枚举类型认定成了static变量…
阅读更多...
java程序员_Java程序员工资为什么这么高？

java程序员_Java程序员工资为什么这么高？

众多行业中&#xff0c;程序员当然属于高薪职业。无论是国内还是国外&#xff0c;IT行业的程序员、工程师&#xff0c;甚至连码农都要比其他行业的从业者的收入高很多&#xff01;尤其是作为IT界的“常青树”Java&#xff0c;原因是什么&#xff1f;01Java行业市场需求存在巨大…
阅读更多...
innodb存储引擎 - 锁

innodb存储引擎 - 锁

MySQL技术内幕&#xff1a;Innodb存储引擎 (间隙锁目前理解的还不是很透彻&#xff0c;后面索引看完了再过来回顾一下间隙锁) 第六章 锁 一、Innodb存储引擎中的锁 1.锁是数据库区别于文件系统的一个关键特性&#xff0c; 2.两种标准的行级锁&#xff1a; 共享锁(S Lock)…
阅读更多...
【转】深入浅出OOP（六）: 理解C#的Enums

【转】深入浅出OOP（六）: 理解C#的Enums

MSDN定义&#xff1a;枚举类型&#xff08;也称为枚举&#xff09;为定义一组可以赋给变量的命名整数常量提供了一种有效的方法。 例如&#xff0c;假设您必须定义一个变量&#xff0c;该变量的值表示一周中的一天。 该变量只能存储七个有意义的值。 若要定义这些值&#xff…
阅读更多...
usb接口供电不足_AMD RX 6000 系列显卡配备USB-C 接口，支持外接供电

usb接口供电不足_AMD RX 6000 系列显卡配备USB-C 接口，支持外接供电

IT之家 10 月 29 日消息 根据 AMD 的官方信息&#xff0c;新发布的 RX 6000 系列显卡进一步增强了显示能力&#xff0c;配备了 HDMI 2.1 接口、DP 1.4 接口和 USB-C 接口。AMD 表示&#xff0c;AMD Radeon 6000 系列显卡全部搭载 HDMI 2.1 VRR 接口&#xff0c;超大带宽支持最高…
阅读更多...
【转】VS2005键盘布局_快捷键大全（总结了一些记忆的口诀）

【转】VS2005键盘布局_快捷键大全（总结了一些记忆的口诀）

VS快捷键对提高生产力有莫大帮助&#xff0c;本文将所有快捷键进行了重新整理归类&#xff0c;便于记忆。有缺失&#xff0c;不足之处&#xff0c;还请大家指出&#xff0c;谢谢 1、窗口快捷键 &#xff08;W代表Windows也就是窗口的意思&#xff09; CtrlW,A: 命令窗口&#…
阅读更多...
int与byte转换(四字节)

int与byte转换(四字节)

public byte[] intToByte(int res) {byte[] targets new byte[4];targets[0] (byte) (res & 0xff);// 最低位targets[1] (byte) ((res >> 8) & 0xff);// 次低位targets[2] (byte) ((res >> 16) & 0xff);// 次高位targets[3] (byte) (res >>…
阅读更多...
mac securecrt程序无响应_如何重置mac上的系统管理控制器smc教程

mac securecrt程序无响应_如何重置mac上的系统管理控制器smc教程

虽然mac是一款十分高端的个人笔记本电脑&#xff0c;但是mac也会有出现故障的时候&#xff0c;比如风扇高速转动、键盘背光灯行为有些异常异常等等&#xff0c;那极有可能是你的系统管理控制器smc出现了问题&#xff0c;所以今天小编就来科普大家如何重置系统管理控制器smc。如…
阅读更多...
bootstraptable treeGrid 懒加载_Java类加载机制及自定义加载器

bootstraptable treeGrid 懒加载_Java类加载机制及自定义加载器

一&#xff1a;ClassLoader类加载器&#xff0c;主要的作用是将class文件加载到jvm虚拟机中。jvm启动的时候&#xff0c;并不是一次性加载所有的类&#xff0c;而是根据需要动态去加载类&#xff0c;主要分为隐式加载和显示加载。隐式加载&#xff1a;程序代码中不通过调用Clas…
阅读更多...
【转】WCF、WebAPI、WCFREST、WebService之间的区别

【转】WCF、WebAPI、WCFREST、WebService之间的区别

在.net平台下&#xff0c;有大量的技术让你创建一个HTTP服务&#xff0c;像Web Service&#xff0c;WCF&#xff0c;现在又出了Web API。在.net平台下&#xff0c;你有很多的选择来构建一个HTTP Services。我分享一下我对Web Service、WCF以及Web API的看法。 Web Service 1、它…
阅读更多...
Idea打可执行jar包

Idea打可执行jar包

前些日子试了下idea打包&#xff0c;有些细节没太注意所以经常打包失败&#xff0c;要不然就是显示没有主清单属性&#xff0c;所以一直用eclipse打包&#xff0c;今天又重新捣鼓了一下&#xff0c;写下过程&#xff1a; 1. 先添加需要打jar包的主入口 第三步一定不要放在main…
阅读更多...
正则表达式：获取一串字符串中，某个字符串到某个字符串之间的字符串，不包含左右，只取中间

正则表达式：获取一串字符串中，某个字符串到某个字符串之间的字符串，不包含左右，只取中间

表示取出"EventType":" 到 "之间的字符串&#xff0c;非贪婪匹配 (?<"EventType":").*?(?")如果后面"也换成字符串的话&#xff0c;就把?换成?<即可 例子如下&#xff1a; public String getPattern(String str,Str…
阅读更多...
最新文章

Copyright @ 2022~2023