Can material autocomplete suggest only one word, not the whole input value?

user_2779773 0
Viewed 137

Is there any way for angular material autocomplete to suggest just one term, not the whole input value? Default autocomplete component can show a user what possible variants are, and if user chooses a variant then it is set as the input's value. What I want is to let user enter as many words as he wants and suggest variants for each. For example, if I pass ['dog', 'cat', 'bandicoot'] as autocomplete variants, and user enters I love my c then he sees cat and bandicoot as suggestions. Like any IDE autocomplete: it doesn't suggest the whole sentence from start to end, it suggests only the next word you are about to type

Please let me know if there's such functionality in other components/libraries/scripts, not only in angular material library

Thanks in advance

angular-material angular
2 Answers

This is quite a complicated thing. Most IDEs use LSP (see here) or something similar to resolve possible suggestions. They can do that because they specifically know the language used, so they know how to calculate word boundaries, and can predict what the user might want to insert based on the context of the word.

In "real" languages, the word boundaries are calculated differently depending on the locale used. E.g. Thai language doesn't use whitespaces for word boundaries (and actually needs very specific dictionaries to properly calculate more complicated cases). Also, sometimes hyphenation (e.g. "test-case") can be considered a single word or multiple words.

So, you would need to:

  1. Parse the input and properly divide it into words based on some rules (e.g. Unicode, which should be implemented in upcoming ECMA script version, see proposal here. IIRC it's currently implemented in Chromium-based browsers, but the API still can be changed).
  2. Check the current caret position (user can be inserting input in the middle of the text)
  3. Get the "word" under the caret position and run the matching against your "database" of possible words. The matching rules are, again, up to you to decide based on your requirements. Some regex check would be a good initial candidate.
  4. Create an overlay (menu) with the list of possible insertion items (e.g. you could use cdk-overlay, since you're already seem to be using material).
  5. Upon selection of an item from the list, replace the "word" under the caret with the one you require and close the overlay.

I don't know of any libraries that handle such a usecase, since it requires a lot of very specific logic. If you want it to work correctly, and up to your specs, your best bet is to write something from scratch. I can't share solution I've developed since it's a proprietary code of the company I work for. But the above steps should get you started on some basic solution you can expand upon.

user_45501580

Googled a lot and found some beautiful examples of term suggestion: suggestor.js and suggest.js. Turns out if you want to find something like this you better google "js term suggestion" instead of "js autocomplete by one word". Obvious enough, but still took me awhile to find it. Thanks everyone

Tho the original question is still open - can term suggestion be achieved using angular material components

user_27797730
Related