#100DaysOfCode - Day 43: AngularJS Material Autocomplete Demo

#100DaysOfCode - Day 43: AngularJS Material Autocomplete Demo

3 mins

Today, it’s been quite a day (got to spend a large part of it in the hospital), so there’s nothing really new I’ll really be able to focus on today. Fortunately, I was able to get AngularJS snippets to load into the blog posts yesterday, and I wanted to use today’s post to show you all what it looks like to use the Angular Material’s “autocomplete” feature.

It’s a really nifty tool, because it’s sort of a combination between a drop-down (with pre-defined options), and a textbox (with free text). The hybrid approach lets you use it for a field that’s meant to be standardized, but may be easier to type, and may need to be continually edited.

I’d definitely recommend searching for things that don’t exist (you’ll see an option to add it), do exist (you can scroll, use arrows, or swipe on mobile), and decide for yourself if you like this form of input!

Use md-autocomplete to search for matches from local or remote data sources.

{[{item.display}]} No states matching "{[{ctrl.searchText}]}" were found. Create a new one!
Simulate query for results? Disable caching of queries? Disable the input?

By default, md-autocomplete will cache results when performing a query. After the initial call is performed, it will use the cached results to eliminate unnecessary server requests or lookup logic. This can be disabled above.

Happy coding!

~ Moxnr

Written on December 4, 2020