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 相关文章推荐
分享一个asp.net pager分页控件
Jan 04 Javascript
jqTransform form表单美化插件使用方法
Jul 05 Javascript
JS中获取数据库中的值的方法
Jul 14 Javascript
javascript中callee与caller的区别分析
Apr 20 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
Mint UI组件库CheckList使用及踩坑总结
Dec 20 Javascript
vue设置默认首页的操作
Aug 12 Javascript
vue 解决provide和inject响应的问题
Nov 12 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
DOMXML函数笔记
2006/10/09 PHP
PHP语法自动检查的Vim插件
2014/08/11 PHP
PHP date()函数警告: It is not safe to rely on the system解决方法
2014/08/20 PHP
php之curl实现http与https请求的方法
2014/10/21 PHP
php获取错误信息的方法
2015/07/17 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
微信小程序简单实现form表单获取输入数据功能示例
2017/11/30 Javascript
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
微信小程序带动画弹窗组件使用方法详解
2018/11/27 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
2019/12/04 Javascript
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
手把手教你python实现SVM算法
2017/12/27 Python
对python 命令的-u参数详解
2018/12/03 Python
对Python发送带header的http请求方法详解
2019/01/02 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
canvas小画板之平滑曲线的实现
2020/08/12 HTML / CSS
Java提供了哪些企业应用编程接口
2015/02/13 面试题
英语系本科生求职信范文
2013/12/18 职场文书
企业申诉管理制度
2014/01/30 职场文书
卖车协议书
2014/04/21 职场文书
二手房购房意向书
2015/05/09 职场文书
python实现简易名片管理系统
2021/04/11 Python