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 相关文章推荐
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
Bootstrap中CSS的使用方法
Feb 17 Javascript
实例解析js中try、catch、finally的执行规则
Feb 24 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
async/await地狱该如何避免详解
May 10 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
亲自动手实现vue日历控件
Jun 26 Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 Javascript
用JS写一个发布订阅模式
Nov 07 Javascript
最新最全的手机号验证正则表达式
Feb 24 Javascript
使用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
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
PHP遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
2014/11/18 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
python构建基础的爬虫教学
2018/12/23 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
python+os根据文件名自动生成文本
2019/03/21 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
python3.6编写的单元测试示例
2019/08/17 Python
Python项目打包成二进制的方法
2020/12/30 Python
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
英国网上花店:Bunches
2016/11/29 全球购物
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
办公室年终个人自我评价
2013/10/28 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
网管求职信
2014/03/03 职场文书
倡议书范文大全
2015/04/28 职场文书
《别在吃苦的年纪选择安逸》读后感3篇
2019/11/30 职场文书
python基础学习之生成器与文件系统知识总结
2021/05/25 Python
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js
Python中time与datetime模块使用方法详解
2022/03/31 Python
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle