JSFiddle - React, Tailwind, and code Playground

by Kamal Rawat

HTML

<div contenteditable></div>
<input style="display:block" list="browsers" placeholder="Enter desired name">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
      
</datalist>

CSS

div{
    border:thin solid gray;
}


input::-webkit-calendar-picker-indicator {
  display: none;
}

JavaScript

$('div').keyup(function(){
    var test = $(this).text();

if( test.indexOf('@') >= 0){
  // Found world
        $('input').show();

    $('input').focus();
    $('body').append('<span>Press Enter when ready</span>');
}
});
$('input').change(function(){
      var str = $('div').text();
var res = str.replace("@","");
            $('div').text(res);
    
    $('div').append('<a href="http://www.mysite.com/profiles/#">'+$('input').val()+'</a>');
  

        $('input').val('');
        $('input').blur();
            //$('input').hide();

            $('div').focus();
            $('span').remove();


    

});