Shulou(Shulou.com)06/01 Report--

This article mainly explains "angular4 how to achieve the drop-down box with search", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "angular4 how to achieve the drop-down box with search" bar!

Train of thought:

1. Stand on the shoulder of the giant and determine the plug-in style of bootstrap-select. The DropDwon model of primeNG is determined.

2. Analyze the requirements of your own drop-down box and realize it step by step.

First take a look at the final style of the drop-down box:

The first step is very simple.

1), because I have seen the css style code of the plug-in in the drop-down box before. So copy the style file directly. Then take the corresponding html source code and copy it directly.

2), because only need the search function of this style, the rest of the css style are deleted, reducing useless code.

3) continue to analyze the needs and analyze what has been done and what has not yet been done.

It is found that there are other features that have not been done yet:

(1) Open and close the drop-down box.

(2) Click outside the drop-down box and the drop-down box closes.

(3) the input text of the search input box achieves the corresponding filtering function.

(4) Click the option of the drop-down box to assign a value to the input box above.

Implementation steps:

The function of (1), (2) is related to the problem of style. At first, I used the [ngClass] instruction to complete (1) function, but (2) function jammed. The original bootstrap-select plug-in takes advantage of data-toggle=dropdown to complete the addition of the open class. But my own [ngClass] doesn't work. Although I can use * ngIf to complete the function, there is too much code and the cost is high. So the exploration begins:

At first I listened to document's click event in ts, but it didn't work because of anonymous functions. I gave up decisively.

Helplessly, I made a judgment on the class attribute of the element element in ts. Make a judgment based on the class attribute of the interface, add or remove the class attribute to the element element. This completes the first function and the second function.

The third function is relatively simple, directly using the element's click event, and assigning values.

The fourth function, due to the primeNG source code, the function of filtering this block is very simple to achieve. Just copy the source code of primeNG directly.

Corresponding code snippet

Html code

{{selectValue.value}}-- Please select-- No matching items {{item.value}}

Ts initialization code

Export class DropDownComponent implements OnInit {selectValue = new SelectData ("", "--Please select--") 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 ();}

Entity class code used in ts

Export class SelectData {id: string; value: string; constructor (id: string, value: string) {this.id = id; this.value = value;}}

Open and close drop-down box code

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 ();}

Filter Code 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);}}

Filter Code 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 } Thank you for your reading. the above is the content of "how to achieve the drop-down box with search in angular4". After the study of this article, I believe you have a deeper understanding of how to achieve the drop-down box with search in angular4, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.