angular4实现带搜索的下拉框


Posted in Javascript onMarch 25, 2022

本文实例为大家分享了angular4实现带搜索的下拉框的具体代码,供大家参考,具体内容如下

思路:

1、站在巨人的肩膀上,确定了bootstrap-select的插件样式。确定了primeNG的DropDwon的模型。

2、分析自己的下拉框的需求,一步一步实现。

先看下下拉框的最后样式:

angular4实现带搜索的下拉框

第一步十分简单

1)、由于之前看过下拉框的插件的css样式代码。于是乎直接把样式文件,拷过来。再把相应的的html源码拿过来,直接拷贝。

2)、由于只需要搜索功能的这块样式,其余的css样式全部删掉,减少无用的代码。

3)、继续分析需求,分析已经做到的,尚未没有做到的。

发现尚未做到的功能还有: 

(1)下拉框的打开关闭。

(2)点击下拉框之外,下拉框关闭。

(3)搜索输入框输入文字达到相应的过滤功能。

(4)点击下拉框的选项,给上面的 输入框赋值。

实现步骤:

(1),(2)的功能涉及到样式的问题。一开始自己是利用[ngClass]指令来完成(1)功能的,但是(2)个功能卡壳了。原bootstrap-select的插件利用了 data-toggle=dropdown来完成 open类的添加的。但是自己的[ngClass]各种行不通,虽然我可以用*ngIf来完成功能,但是代码太多了,成本高。于是探索开始:

最开始我是在ts里监听了document的click事件,但是因为匿名函数的问题行不通了。果断放弃了。

无奈之在ts里做了对element元素的class属性判断。根据界面的class属性,做判断,给element元素添加或者去掉class属性。这样就完成了第一个功能和第二个功能。

第三个功能比较简单,直接利用元素的click事件,赋值即可。

第4个功能,由于有primeNG源码,对过滤这块的功能还是很简单实现的。直接拷贝primeNG的源码即可。

相应的代码片段

html代码

<div class="btn-group bootstrap-select fit-width" #menu>
 
    <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown"   (click)="activeDrop(menu)" >
        <span id={{selectValue.id}} class="filter-option pull-left" >{{selectValue.value}}</span> <span class="bs-caret"><span class="caret"></span></span>
    </button>
    <div class="dropdown-menu open" >
        <div class="bs-searchbox">
            <input type="text" class="form-control" (input)="onFilter($event)">
        </div>
        <ul class="dropdown-menu inner" >
            <li><a class="active" (click)="activeValue(menu)">——请选择——</a></li>
            <li *ngIf="optionsToDisplay.length==0"><a>没有匹配的项</a></li>
            <li *ngFor="let item of optionsToDisplay,let i=index"><a id={{item.id}} (click)="activeValue(menu)">{{item.value}}</a></li>
        </ul>
    </div>
</div>

ts初始化代码

export class DropDownComponent implements OnInit {
 
    selectValue = new SelectData("", "——请选择——")
    active = "false";
    @Input() data = new Array();
    filterValue = "";
    optionsToDisplay = new Array();
    filterBy = "value";
    constructor(private inputhandler: InputHandler,
        private objectutils: ObjectUtils) {
 
 
    }
    ngOnInit() {
          console.log(this.data);
        this.optionsToDisplay = this.data.concat();
    }

ts中用到的实体类代码

export class SelectData {
    id: string;
    value: string;
    constructor(id: string, value: string) {
        this.id = id;
        this.value = value;
    }
}

打开关闭下拉框代码

activeDrop(e: HTMLElement) {
        console.log(this.data);
        if (e.classList.contains("open")) {
            e.classList.remove("open");
 
        } else {
            e.classList.add("open");
        }
    }
    activeValue(e: HTMLElement) {
        this.selectValue.value = event.srcElement.textContent;
        this.selectValue.id = event.srcElement.id;
        if (e.classList.contains("open")) {
            e.classList.remove("open");
        } else {
            e.classList.add("open");
        }
        event.stopPropagation();
    }

过滤代码1

onFilter(event): void {
        this.optionsToDisplay.length = 0;
        let inputValue = this.objectutils.trim(event.target.value.toLowerCase());
     
        if (inputValue && inputValue.length) {
            this.filterValue = inputValue;
            this.optionsToDisplay = this.activateFilter();
        }
        else {
            console.log(this.optionsToDisplay);
            this.filterValue = null;
            this.optionsToDisplay = this.data.concat();
            console.log(this.optionsToDisplay);
 
        }
    }
 
    activateFilter() {
        let searchFields: string[] = this.filterBy.split(',');
        if (this.data && this.data.length) {
            return this.objectutils.filter(this.data, searchFields, this.filterValue);
        }
    }

过滤代码2

resolveFieldData(data: any, field: string): any {
        if(data && field) {
            if(field.indexOf('.') == -1) {
                return data[field];
            }
            else {
                let fields: string[] = field.split('.');
                let value = data;
                for(var i = 0, len = fields.length; i < len; ++i) {
                    if (value == null) {
                        return null;
                    }
                    value = value[fields[i]];
                }
                return value;
            }
        }
        else {
            return null;
        }
    }
    
    filter(value: any[], fields: any[], filterValue: string) {
        let filteredItems: any[] = [];
        
        if(value) {
            for(let item of value) {                
                for(let field of fields) {
                    if(String(this.resolveFieldData(item, field)).toLowerCase().indexOf(filterValue.toLowerCase()) > -1) {
                        filteredItems.push(item);
                        break;
                    }
                }
            }
        }
        
        return filteredItems;
    }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
从javascript语言本身谈项目实战
Dec 27 Javascript
JavaScript CSS 修改学习第四章 透明度设置
Feb 19 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
Jan 08 Javascript
jQuery实现平滑滚动的标签分栏切换效果
Aug 28 Javascript
深入理解MVC中的时间js格式化
May 19 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 Javascript
在vue里使用codemirror遇到的问题
Nov 01 Javascript
微信小程序实现评论功能
Nov 28 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
May 13 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
使用Canvas绘制一个游戏人物属性图
【js设计模式】SOLID五大设计原则
什么是SOLID
Vue3中toRef与toRefs的区别
Mar 24 #Vue.js
Javascript的promise,async和await的区别详解
Mar 24 #Javascript
一起来看看Vue的核心原理剖析
Mar 24 #Vue.js
手写Spirit防抖函数underscore和节流函数lodash
Mar 22 #Javascript
You might like
虚拟主机中对PHP的特殊设置
2006/10/09 PHP
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
原生js仿浏览器滚动条效果
2017/03/02 Javascript
vue.js的安装方法
2017/05/12 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
2019/12/20 jQuery
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
python模拟登录百度贴吧(百度贴吧登录)实例
2013/12/18 Python
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
python读取浮点数和读取文本文件示例
2014/05/06 Python
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
如何将python中的List转化成dictionary
2016/08/15 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
termux中matplotlib无法显示中文问题的解决方法
2021/01/11 Python
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
四群教育工作实施方案
2014/03/26 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
安全生产标语大全
2014/10/06 职场文书
高三英语教学计划
2015/01/23 职场文书
清明节主题班会
2015/08/14 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫