angular4如何實現帶搜索的下拉框

這篇文章主要講解了“angular4如何實現帶搜索的下拉框”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“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;
    }

感謝各位的閱讀，以上就是“angular4如何實現帶搜索的下拉框”的內容了，經過本文的學習后，相信大家對angular4如何實現帶搜索的下拉框這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！