JSFiddle - React, Tailwind, and code Playground

by cheongjin kim

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://ivirabyan.github.io/jquery-mentions/jquery.mentions.css">
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://ivirabyan.github.io/jquery-mentions/jquery.mentions.js"></script>

<p>Try to type "@a"</p>
<p>Textarea example:</p>
<textarea class="mentions" name="text">@[김청진](rlacjdwls1) is my best friend! I love to play @[박창주](u_33edbfac8a9c8483aae0ca30bb18745ebd47af29)</textarea>

<p>Input example:</p>
<input class="mentions" name="text" value="@[김청진](rlacjdwls1) is my best friend! I love to play @[박창주](u_33edbfac8a9c8483aae0ca30bb18745ebd47af29)" />

<p>Contenteditable example:</p>
<div class="mentions" contenteditable style="width: 300px; height: 200px; border: 1px solid #000">
  <p>@[김청진](rlacjdwls1) <b>tratata</b> trololo</p>
</div>

JavaScript

$('.mentions').mentionsInput({
  source: [
    {value: 'ALL', uid: 'all'},
		{value: '김청진', uid: 'rlacjdwls1'},
    {value: '진성호', uid: 'u_666296a31686eed789ed7191da7742a4e2e79330'},
    {value: '박창주', uid: 'u_33edbfac8a9c8483aae0ca30bb18745ebd47af29'},
    {value: '코바타 아야카', uid: 'u_7edd6ce938cd6d5c9913b81796ee90c67ad76e92'},
    {value: '임성태', uid: 'dlatjdxo1'},
    {value: '김성국', uid: 'rlatjdrnr1'},
    {value: '박성원', uid: 'qkrtjddnjs1'},
    {value: '이준형', uid: 'dlwnsgud1'},
    {value: '유민재', uid: 'u_e5c7c4d2e03bdb2e4c8aa2fca86fbec865d749c9'},
    {value: '마현규', uid: 'akgusrb1'},
    {value: '심희수', uid: 'u_8f27507067c3ce5734649beadf97262120441b3f'},
    {value: '최경락', uid: 'u_2a3308308e1c1a6f6c81fac141897fa8c3e40ade'},
    {value: '황보람', uid: 'u_861c2116d2de7530f905cb84c0cc15df97b6876d'},
    {value: '김동은', uid: 'rlaehddms1'},
    {value: '이재민', uid: 'u_61b11722d6f17997968fc7bfa4f816c13c8581c4'},
    {value: '권혁남', uid: 'u_7b7f00d5d0fda730de5d5de199f752344318f156'}
  ], 
  showAtCaret: true
});