'How to show a dropdown list on a contentEditable span/div item when user tries to change the text of span

I have a contentEditable span element defined as: 

<span contentEditable={this.props.enableEditColumn} onKeyPress={this.checkInput.bind(this,columnDef)}>
                    {displayContent}
</span>

The checkInput function is responsible for checking if a number or letter can be inputted. In the following image, highlighted 'Holmes' is editable. If I enter another character, or delete and start typing, I need to be able to show a list of names in a dropdown that should popup there.

editable,

The selected value would then become the span/div text.

Any suggestions would be appreciated. Thanks!

javascripthtmlreactjscontenteditable


Solution 1:[1]

try it https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_dropdown_hover but I could not understand exactly what you want. I think this may help you, just send it again. NOTE: I'm Brazilian I'm using google translate

Solution 2:[2]

There is great plugin called draft.js. It has a mentions addon that helps with this. If you need help with the draft.js plugin just message me and I will help. Been using it for months and will respond quickly

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Gabr13l_Alm31da
Solution 2 ErikaPeterson007

Related Questions