如何使用javascript显示基于光标位置的下拉菜单？

Question

I am new to programming and want to check if the string contains @ character before or after the cursor position.

If the @ is present only before cursor position in the input field then get the complete string after @ .

If the @ is present before and after the cursor position then get the string from @ (that is the one before cursor position) until white space.

String example: "I am @u @user1" , here cursor position is at index 8.

What I have tried: I am using event.target.selectionStart to get the cursor position and then the lastindexOf('@') in the string.

if (event.target.selectionStart > event.target.value.lastIndexOf('@')) {
    /*this means there is no @ after cursor position*/
    string =    event.target.value.substr(event.target.value.lastIndexOf('@') +1);
}

But I am not sure how to find out if there is another @ character before cursor position and how to get the string after @ that is before the cursor position.

I am quite confused and don't know how to proceed further. Could someone help me with this? Thanks.

Answer 1

Well you're on the right track.

You just have to be more specific in your conditionnals.

 const test = document.querySelector('input'); test.addEventListener('keyup', function(event) { if (event.target.selectionStart > event.target.value.indexOf('@') && event.target.selectionStart > event.target.value.lastIndexOf('@')) { console.log(event.target.value.substring(event.target.value.indexOf('@'))); } if (event.target.selectionStart <= event.target.value.indexOf('@') && event.target.selectionStart <= event.target.value.lastIndexOf('@')) { console.log('after cursor'); } if (event.target.selectionStart > event.target.value.indexOf('@') && event.target.selectionStart <= event.target.value.lastIndexOf('@')) { console.log(event.target.value.substring(event.target.value.indexOf('@'), event.target.value.lastIndexOf('@'))); } }) 

 <input value="I am @u @user1">