How can i add tag to text in search box

Question

I am working on a job-listing project that fetches jobs based on the selected country, now I am trying to create a search box that changes my text to tags just like StackOverflow's way of adding tags. I already have the figma design but implementing is the problem.

Here is the figma link: https://www.figma.com/proto/UE9D4alg1970WXIDnLAfVzHz/listing-by-country?node-id=96%3A0&scaling=min-zoom

<div class="input-group input-group-search">
   <input id="search-text" value="" type="search" class="form-control" placeholder="Enter Job listing according to Countries">
   <div class="input-group-btn">
      <button class="btn btn-primary ml-2" id="search-submit" type="submit">Search</button>
   </div>
</div>

I expect the result to produce tags immediately after or inside the search box. Thanks in advance

Answer 1

You could use something like: https://github.com/yairEO/tagify

or even:

https://selectize.github.io/selectize.js/

Google is your friend.