I am looking for a way to make my select into an autocomplete field. I know of angularJS directives that give you autocomplete functionality, but these don't allow the input name (what the user sees) and the input value (what the system uses) to be different. I need a select box, however, because the option name (that the user will see) and the option value (that the system will use) are different.
I know of such a plugin for jQuery, selectToAutocomplete, which is pretty neat and works well, but I would prefer to stay with AngularJS as much as possible. Is there an AngularJS alternative for jQuery selectToAutocomplete?
Simple autocompleteStart by creating the autocomplete panel and the options displayed inside it. Each option should be defined by a mat-option tag. Set each option's value property to whatever you'd like the value of the text input to be when that option is selected.
The Angular Autocomplete is a textbox or search box component that provides a list of suggestions to select from as the user types. It has several out-of-the-box features such as data binding, filtering, grouping, autocomplete search, UI customization, accessibility, and more.
You can remove the formControl-binding from your input and when you select an option you set that id to your form. You are already calling such a function (onSelectionChange)="onEnteredAccount(accountOption)" in which you can do that.
Angular UI ( http://angular-ui.github.io/bootstrap/ ) has a directive Typeahead which should fit your requirements. Look at that page for the 3rd example under Typeahead section with title Custom templates for results
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With