CODEWITHSUNDEEP
jqueryhtmltagsbootstrap-4
Allen Haley
Allen Haley

Reputation: 657

How can I implement tags-input field with multiple kind of tags

I'd like to add tags-input field on my website. Please take a look at the screenshot.

https://snag.gy/1z3CTQ.jpg

Also, you can check here - https://insurify.com/compare/#/cars/car_make/1

As you can see here, when input one tag, there's different kinds of tags displaying.

I need an example like this.

Please someone help me!!

Upvotes: 0

Views: 338

Answers (1)

Steven Moseley
Steven Moseley

Reputation: 16325

Welcome to SO! I’m the head of engineering at Insurify, and my team and I “invented” that type of input (we call it a multi-tag-select) for our website. It wasn’t a simple process, because we had never seen anything like it before, so we wound up creating custom code to handle most of the functionality.

I’ll try to explain it to the best of my ability so you can create something similar for your product.

The component is basically a mash-up of:

  1. a responsive select input
  2. a tags input,
  3. a multi-dimensional model / data structure, and
  4. a controller to manage it all

We're using an API to grab data at different points, and we're caching the data on the server to make it faster, but none of that is specific to this input, so I won't detail how any of that is handled.

The way it works is:

  1. The controller loads, and grabs the first list of data from the model. The controller then renders the wrapper for the tags, and displays the first drop-down list. I assume here that you understand how to create a drop-down select list and a tags input, or that you can plug into libraries like jQuery UI to get these components.
  2. On selection of an item from the list, a "selected" event fires. This causes the controller to hide the select list, render a tag for the selected item, and load and render the subsequent list for selection. This process continues until all dimensions of data have been selected, at which the component fires a "complete" event to let any listeners know that the input has been completed.
  3. At the same time, upon completion, the input could be made to add or update a hidden input to the form (for a synchronous standard form post). In our case, we're a single-page app with an async RESTful API, so the selected value is persisted into a property of the component controller, and extracted when the form is serialized.
  4. When the tag's "x" is clicked, we delete all selections back to the preceding tag. Say, for example, 4 tags were selected, and we "x" the 3rd. The 4th will also delete. After the tags are deleted, the select list for the lowest level will be presented.
  5. For our component, we opted to skip any lists that have only one item. For those, we simply preselect the tag and move on to the next list. For this reason, when a preselected tag is x-ed, we also delete the preceding tag.

That's about it. Most of the work is in loading the data and wiring it all together.

If you have a specific question about any piece of this component, please feel free to ask in another question and I'll help where I can!

Upvotes: 2

Related Questions