Improve autocomplete #4086

Open
djensen47 opened this Issue Jan 11, 2017 · 4 comments

Projects

None yet

3 participants

@djensen47
djensen47 commented Jan 11, 2017 edited

Autocomplete 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
@acburst acburst self-assigned this Jan 11, 2017
@acburst
Collaborator
acburst commented Jan 12, 2017

Added a first pass at chips autocomplete integration in 83e6ba0.

Would appreciate some testing. You can check it out on the latest master version under the chips docs.

@gewisser

Great!
Before the new year, he made such a revision, did not manage to propose the inclusion of improvements.

@djensen47

Chips are cool but I was actually more concerned about the other items. I've updated the issue above to specify the features that I'm looking for in a robust autocomplete solution.

@djensen47

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 localized

With 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment