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 相关文章推荐
JS 参数传递的实际应用代码分析
Sep 13 Javascript
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
javascript 子窗体父窗体相互传值方法
May 31 Javascript
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 Javascript
JS实现课堂随机点名和顺序点名
Mar 09 Javascript
node.js中axios使用心得总结
Nov 29 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
js实现简单抽奖功能
Nov 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
php生成随机密码的三种方法小结
2010/09/04 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
给Function做的OOP扩展
2009/05/07 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
jQuery中Form相关知识汇总
2015/01/06 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
python使用re模块爬取豆瓣Top250电影
2020/10/20 Python
HTML5图片预览实例分享
2014/06/04 HTML / CSS
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
SQL SERVER面试资料
2013/03/30 面试题
实习自我鉴定模板
2013/09/28 职场文书
岗位职责的构建方法
2014/02/01 职场文书
业务部门经理岗位职责
2014/02/23 职场文书
文明工地标语
2014/06/16 职场文书
浅谈Python中的正则表达式
2021/06/28 Python
python开发飞机大战游戏
2021/07/15 Python
java多态注意项小结
2021/10/16 Java/Android