My HTML structure looks like this:
<table id="table-15244" cellspacing="0" class="comment"><tbody>
<tr id="comment-37">
<td style="color: #999" class="NV">
</td>
<td class="hidden-mob">
<a><i class="fa fa-caret-up c-voteup"></i></a><br>
<a><i class="fa fa-bug c-bug"></i></a>
</td>
<td class="CT">This is first comment
<samp>ــ</samp>
<span>
<a>Jack</a> // Here
</span>
<span class="date_time">
<span></span>
</span>
</td>
</tr>
<tr id="comment-37">
<td style="color: #999" class="NV">
</td>
<td class="hidden-mob">
<a><i class="fa fa-caret-up c-voteup"></i></a><br>
<a><i class="fa fa-bug c-bug"></i></a>
</td>
<td class="CT">This is second comment
<samp>ــ</samp>
<span>
<a>Peter</a> // Here
</span>
<span class="date_time">
<span></span>
</span>
</td>
</tr>
</tbody></table>
I want to extract two names from the HTML and display them as a pop-up after entering @ followed by their initial characters (in this case, J, P). The pop-up should be hidden if the entered text does not match these names, similar to stackoverflow's comments textarea.
How can I achieve this?
HTML:
// the above HTML is here
<textarea class="comment" rows="4" cols="50"></textarea>
JS:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
$(".comment").on('keydown', function(e){
if (e.which == 50) { // @ pressed
/* wait for first character that will be entered
* if it is match with one or more of those names in the html
* then show that name as a pop-up on the top of textarea
*/
}
});