将代码嵌套在input元素中

Question

I am looking for someone to guide me in the right direction.

I have an input form. I want to make it so when a user types in something such as 'landscaping', it checks a file(json), and if 'landscaping' is found, then it creates a small box inside the input form. Allowing users to stack multiple inline boxes. It would be something similar to this:

As I was posting the question, I realized that this website uses the exact function I'm looking for, so the best example is I'm looking to make something like the tag input form at the bottom of the post question page.

Thanks in advance!

Answer 1

Select2 does that. You can view it's multiple select boxes example here.

$(".js-example-basic-multiple").select2();

<select class="js-example-basic-multiple" multiple="multiple">
  <option value="landscaping">Landscaping</option>
  ...
  etc. all options you need
</select>

so you can add all your data in the json file as options to the select box. Or if you see more of the examples, it can load the options from an array (Loading array data) or even from a remote file that returns JSON (Loading remote data).