TAGS INPUT in JavaScript

Learn how to create a simple, yet functional tag input field in JavaScript, akin to those used to tag things like YouTube videos, blog posts, or questions on StackOverflow.

GeekLaunch produces educational videos covering such topics as Linux, web development (including HTML5, CSS 3, JavaScript, and PHP), Java programming, tips for power users, among many others. Subscribe: New video every Wednesday!

Not a geek? Start today!

[petergunold]

Wow great.

A plain vanilla JS solution without thriard party libs, i love this

[manimdu]

This is very helpful, Thanks a lot... 😃

[lobs]

Just so you know I liked the video the first 30 seconds I saw it. Thanks!

[umaimahussain]

great video! but i gotta ask how do you display the tags saved in database with that css in a field

[ramsagarsah]

Hey, Thanku for such a wonderful video. But I am facing a small problem.
I set name attribute to main input and tried to get all the values with $_POST method from inside the main input field but I got nothing.

May you help me troubleshooting this? And one more thing, every value(span) must separated with a comma so I can upload it to my server and use anytime as array.

[jimkolb]

Works great in Chrome! :)
Challenge: for an HTA program with IE7...
How would you rework this to make it work??

[nurlanhuseynov]

Thanks for video bro. I am watching from Azerbaijan <3. Subscribed and waiting new videos

[enzopatriarca]

hii, great video, help me a lot!. i wanna to ask if with this input tags i can fill it from an array?

[DrakQuilla]

Great video man, it helped a lot. Thank you

[shubhambhatnagar]

Hey buddy, i have used that code and for my case i need input box above and tags downside, will you please tell how can i do that, needed urgently....

[ghalib]

how can i save this data on database
i have already convert this code in laravel but i don't know how to save the input in database with js

[nyarlathotepn]

Thanks a lot! I implemented in a search box and it works when I add comma after the input then hit my search button. However it doesn't work when I just type 1 input without adding comma and search it. Do you know how to solve this?

[richardschofield]

Thanks for this. How can I call the addTag() function from outside of the 'foreach tags-input' main function?
Thanks

[kyle]

great video, exactly what I was looking for

[juanquevedo]

Hola gracias por este gran tutorial!! después de tantos años aun es muy bueno con cualquier otro!! una pregunta! se le puede agregar un boton de agregar! y asi agregar lo que se hace en el input?

[edwintsalcedo]

Thank you for the video :D it worked nicely with angular!

[stef]

But how we can retrieve this data and store it in JSON format? I know how to store data in MySQL using PHP, but without JSON this functionality is useless. It looks nice but it's useless. I know how to store values and convert values into JSON using PHP, but I'm barely use Javascript. So, the question is how to retrieve this values from the form and store it in Javascript array and furthermore in JSON?

[XXP]

but how to insert into SQL database, and how to read them from database for edit?

[paras]

How to make the size of input box fixed . Like in your example whenever we type a tag, then the input box increases it's length from the right side, How can i fix it to not increase ?

[gabonessi]

Thanks for the video! How could I allow spaces between words? every time I add space is replaced by a hyphen instead.