I want to build an input with contextual autocomplete. That is it should be aware of where the cursor is and should provide autocomplete options based on the cursor location. Best example I can give is something like advanced jql query input on jira. I know they are doing by making the div contenteditable and wrapping all the keywords in spans. But I'm missing some knowledge on how it's all linked together and how to get started. Also I need to do it in angular so any angular specific approach would be more helpful. If there are any open source projects out there which implement something similar that would be helpful too. I can go through the code and try to understand how it's done. I'm a little new to web development so if anyone can help out it would be great.
What comes to my mind is by using [(ngModel)] you always know the current value of the input. You can break it down into a word array using .split(' ') and then generate from the last element in that array (ie the current word being typed) a list of suggestions. Then present it somehow for the user to select. Uppon selection you can replace the last word of the array from earlier with the one that the user has selected, and then rebuild it as one string.