Improve autocomplete
See original GitHub issueAutocomplete is problematic for a number of reasons:
- can’t limit results
- can’t use IDs instead of strings
- difficult to internationalize values (see previous about using IDs)
- drop down pushes other elements down on the page
Here’s a library that has solved many of these issues: https://github.com/icefox0801/materialize-autocomplete
I would like to suggest either integrating this library or all of it’s features.
- Limit maximum results (we don’t need 1000 line items after typing 1 character)
- Specify number of chars before the autocomplete begins (default is 1)
- Chips
- Allow each item to be represented by an id that is placed into a hidden field when selected
- Allow an array of objects to be passed as the data
Converting arrays to objects is a pain in the neck. I suggest the following:
[{value: 'apple', id: '4rew65s1', img: '…'}, {value: 'banana', id: '7r98vv8s', img: '…'}]
- Backward compatibility with the existing object {value: image} structure
- Option to require that an item from the list is selected, e.g., blank the field onBlur if nothing was selected
Issue Analytics
- State:
- Created 7 years ago
- Reactions:48
- Comments:45 (2 by maintainers)
Top Results From Across the Web
Smart autocomplete best practices - Grid Dynamics Blog
Smart autocomplete is an essential feature for improving online catalog navigation and boosting product discovery for users.
Read more >Google Autocomplete: 3 (Clever TIPS) Improve Your SEO
It's designed to help complete searches of queries that you intend to find. It does not, however, provide suggestions for new searches.
Read more >10 Autocomplete Search Best Practices - How Predictive ...
List of autocomplete features that improve better search and UX. In short: by making search faster and ensuring relevant results, autocomplete will decrease ......
Read more >Autocomplete Search Best Practices for Ecommerce
1. Make Autocomplete Search FAST · 2. Think Beyond Product Content for Autocomplete Suggestions · 3. Use Autocomplete Recommendations for ...
Read more >How to Improve the Autocomplete Widget in Drupal 9 Using ...
Anyone who has used Drupal has encountered the autocomplete widget where you enter a letter or two and select the desired link from...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I made a pull #4724 on the autocomplete improvement allowing to include attributes in the ID`s, and also added a new property in the function called scrollLength that allows defining the limit of items to be displayed before scrolling.
example:
Regarding using IDs. This helps immensely with a few things including i18n.
For instance:
[{value: 'apple', id: '4rew65s1', img: '…'}, {value: 'banana', id: '7r98vv8s', img: '…'}]
and[{value: 'manzana', id: '4rew65s1', img: '…'}, {value: 'plátano', id: '7r98vv8s', img: '…'}]
would be the same with the labels localizedWith the current autocomplete implementation, I would have to have a lookup table for every single language that I support to get the proper id, which is not scalable.