Create input form to add/remove keywords

Question

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 becomes 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>

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 - http://jqueryui.com/autocomplete/ — Vandesh, Oct 17 '13 at 14:13

score 3 · Answer 1 · answered Oct 17 '13 at 14:16

3

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.com/xoxco/jQuery-Tags-Input . You can use jQuery.autocomplete.

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

answered Oct 17 '13 at 14:16

krasulya

451
5
15

In the source code of stackoverflow I find `` – Nicolas. Oct 17 '13 at 14:20
Here is generated source (after javascript execution) http://cl.ly/S0p6. And yes, there is real `` tag too. And when you add something to tag list in `
` element, javascript changes value of real ``. You can't see it in the source on my screen, but it's value is `hello wowo` http://cl.ly/S0mB – krasulya Oct 17 '13 at 18:00
The same logic is in custom form elements, for example. When you want create custom `select` field, you just create dropdown list. And when user clicks on dropdown item, you manually (I mean in javascript) change value of real ` – krasulya Oct 17 '13 at 18:06

score 3 · Answer 2 · edited May 23 '17 at 12:06

3

Look back at this SO question:

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

the dude that answeres suggested

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

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

edited May 23 '17 at 12:06

Community

1
1

answered Oct 17 '13 at 14:25

holographix

2,300
2
27
43

I'm not using jQuery but I'll find a way out, thanks – Nicolas. Oct 17 '13 at 14:28
For those interested in a non-jquery example, see my answer below – Wes Johnson Jun 07 '14 at 01:25

score 0 · Answer 3 · answered Oct 17 '13 at 14:25

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

score 0 · Answer 4 · answered Jun 07 '14 at 01:25

0

Little late to the party but I created one as a React component. 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.

answered Jun 07 '14 at 01:25

Wes Johnson

2,943
20
31

Create input form to add/remove keywords

4 Answers4