svelte-materialify
svelte-materialify copied to clipboard
Search / Typeahead / Auto-complete Text Field
Is there a recommendation for achieving this? Or is this something other people would be interested in?
An autocomplete component is planned.
If I can pitch in, please do not follow the react material-ui model of auto-complete. It is very limited in what it can do. Try to emulate what the Android AutoCompleteTextView does. One of the thing that I find important is to be able to auto-complete on a part of a text, for example when someone is typing a list of items (coma-separated), the auto-complete should be able to deal with completing only one item. I implemented such an auto-complete box with react and might do it for svelte (svelte makes it a lot easier to modify a text-box inside the text and keep the cursor at the right place).
Thanks for the info, what are your thoughts about autocomplete in other frameworks, such as vuetify, I almost never had the need to use them so some insight would be nice.
I can only comment based on what I used on Android and what I did on top of the React Material-ui. Essentially in both cases, there is an adapter that can be asynchronous and will set the current options. The adapter is given the current text with the current selection (cursor position) and calls back to set the values, so that having an async source of suggestions can be taken care of. When the user tap on a choice, the adapter is asked to modify the text with the chosen option.
When a fixed list of text option is given, a default standard adapter is created. It is the one that can match the currently inputted text with the list of options. PS: I have been working on an implementation of this feature for my app around the Textarea component. Svelte has some great features to help with placing the pop-up suggestion menu. I will share my code once it's satisfactory (but probably not complete yet for full integration in a PR)
I am attaching a video screen grab of the current state of my Auto-complete around a single TextField https://user-images.githubusercontent.com/7741038/103492220-91458000-4de6-11eb-86b7-25ff8a0a9da4.mov
And below is similar Auto-complete around Textarea where the completion is for a list of dash-separated items of the same type.
https://user-images.githubusercontent.com/7741038/103492315-3f512a00-4de7-11eb-9ca1-3cca2107b681.mov
A few details on the placement need to be polished. Selection via keys might also be desirable.
An autocomplete component is planned.
Will the autocomplete component coming soon?