angular4實現(xiàn)帶搜索的下拉框

更新時間：2022年03月25日 16:31:28 作者：青帆滄海

這篇文章主要為大家詳細(xì)介紹了angular4實現(xiàn)帶搜索的下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了angular4實現(xiàn)帶搜索的下拉框的具體代碼，供大家參考，具體內(nèi)容如下

思路：

1、站在巨人的肩膀上，確定了bootstrap-select的插件樣式。確定了primeNG的DropDwon的模型。

2、分析自己的下拉框的需求，一步一步實現(xiàn)。

先看下下拉框的最后樣式：

第一步十分簡單

1）、由于之前看過下拉框的插件的css樣式代碼。于是乎直接把樣式文件，拷過來。再把相應(yīng)的的html源碼拿過來，直接拷貝。

2）、由于只需要搜索功能的這塊樣式，其余的css樣式全部刪掉，減少無用的代碼。

3）、繼續(xù)分析需求，分析已經(jīng)做到的，尚未沒有做到的。

發(fā)現(xiàn)尚未做到的功能還有：

（1）下拉框的打開關(guān)閉。

（2）點擊下拉框之外，下拉框關(guān)閉。

（3）搜索輸入框輸入文字達(dá)到相應(yīng)的過濾功能。

（4）點擊下拉框的選項，給上面的輸入框賦值。

實現(xiàn)步驟：

（1），（2）的功能涉及到樣式的問題。一開始自己是利用[ngClass]指令來完成（1）功能的，但是（2）個功能卡殼了。原bootstrap-select的插件利用了 data-toggle=dropdown來完成 open類的添加的。但是自己的[ngClass]各種行不通，雖然我可以用*ngIf來完成功能，但是代碼太多了，成本高。于是探索開始：

最開始我是在ts里監(jiān)聽了document的click事件，但是因為匿名函數(shù)的問題行不通了。果斷放棄了。

無奈之在ts里做了對element元素的class屬性判斷。根據(jù)界面的class屬性，做判斷，給element元素添加或者去掉class屬性。這樣就完成了第一個功能和第二個功能。

第三個功能比較簡單，直接利用元素的click事件，賦值即可。

第4個功能，由于有primeNG源碼，對過濾這塊的功能還是很簡單實現(xiàn)的。直接拷貝primeNG的源碼即可。

相應(yīng)的代碼片段

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;
? ? }
}

打開關(guān)閉下拉框代碼

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;
? ? }

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: