Suggester

back edit

Specify an endpoint in which the suggestions live.

<div class="position-relative">
  <text-expander keys=":" data-emoji-url="../../support/emoji_suggestions">
    <textarea autofocus>Type :cat2:</textarea>
  </text-expander>
</div>

See /demo/support/emoji_suggestions for suggestion markup example.

<div class="position-absolute">
  <ul role="listbox" class="bg-white list-style-none mt-4 border" style="width: 180px;">
    <li id="grass" role="option" class="p-1" data-value="🌱" data-emoji-name="grass" data-text="grass">🌱 grass</li>
    <li id="sparkles" role="option" class="p-1" data-value="✨" data-emoji-name="sparkles" data-text="sparkles">✨ sparkles</li>
    <li id="cat2" role="option" class="p-1" data-value="🐈" data-emoji-name="cat2" data-text="cat2">🐈 cat2</li>
  </ul>
</div>