Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Select to autocomplete angular directive

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?

like image 950
Ben Avatar asked Feb 28 '14 15:02

Ben


People also ask

How do you use mat select autocomplete?

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.

What does autocomplete do in angular?

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.

How do you clear mat-autocomplete when no option is selected from autocomplete dropdown?

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.


1 Answers

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

like image 109
przno Avatar answered Oct 23 '22 12:10

przno