本文实例为大家分享了angular4实现带搜索的下拉框的具体代码，供大家参考，具体内容如下
思路：
1、站在巨人的肩膀上，确定了bootstrap-select的插件样式。确定了primeng的dropdwon的模型。
2、分析自己的下拉框的需求，一步一步实现。
先看下下拉框的最后样式：
第一步十分简单
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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
