I'm trying to make something similar as in stackoverflow where you add keywords.

I'm just stuck with the HTML part or javascript?

When a keyword is found an clicked, how do i make it fixed in the input field? Like in stackoverflow it bees blue with a remove button next to it.

Currently the results are being showed underneath the <input>, in a new <div>.

<fieldset>
    <label for="title">Add keyword<label>
    <input class="input" type="text" size="30" onkeyup="searchFunction()" onkeydown="searchFunction()">
</fieldset>

<div id="livesearch"></div>

I'm trying to make something similar as in stackoverflow where you add keywords.

I'm just stuck with the HTML part or javascript?

When a keyword is found an clicked, how do i make it fixed in the input field? Like in stackoverflow it bees blue with a remove button next to it.

Currently the results are being showed underneath the <input>, in a new <div>.

<fieldset>
    <label for="title">Add keyword<label>
    <input class="input" type="text" size="30" onkeyup="searchFunction()" onkeydown="searchFunction()">
</fieldset>

<div id="livesearch"></div>

• javascript
• html

• 1 Can you post what you've tried so far? – tymeJV Commented Oct 17, 2013 at 14:09
• just right click on the StackOverflow tags implementation and click on "Inspect Element" to see how the HTML structure for it is implemented. You can use that with any autosuggest plugin like - jqueryui./autoplete – Vandesh Commented Oct 17, 2013 at 14:13

4 Answers 4

It's not a real <input> element. It's just looks like input. You should use regular <div> and append (for example) stylised <span> to it.

Try out this plugin for jQuery https://github./xoxco/jQuery-Tags-Input . You can use jQuery.autoplete.

I'm using this plugin in production and it's ok.

Look back at this SO question:

jQuery autoplete tagging plug-in like StackOverflow's input tags?

the dude that answeres suggested

(demo) https://github./aehlke/tag-it

and much more. check it out you might find a solution that suites you the best!

There is no "easy" way to do it, you will need more then just a <input> to achieve this kind of behavior.

However, there are some good plugins using jQuery (don't know any made with plain javascript) which already made this:

TextExt

TokenInput

VisualSeach

Little late to the party but I created one as a React ponent. The underlying code is plain javascript (no jQuery), so should be easy to decipher.

sterlingwes/react-taginput

See the taginput.jsx file for an idea how it works.