0

I would like to provide functionality where a person would enter a word into a textarea using HTML/JQuery/Javascript (doesn't have to be a textarea if it can't be), then on pressing the spacebar, the word would be bounded and a 'x' would show next to it so that it can be removed.

Like this: enter image description here

Apologies I am not sure what to call such an element / control.

Many thanks for any help!

sim1
  • 417
  • 5
  • 26
  • I believe this is what you're looking for: http://stackoverflow.com/questions/519107/jquery-autocomplete-tagging-plug-in-like-stackoverflows-input-tags – Michelle Nov 05 '13 at 22:23
  • Thanks for the link! I eventually used Select2 found [here](http://ivaynberg.github.io/select2/) – sim1 Dec 18 '13 at 19:04

1 Answers1

0

something like this

html

<div id="box">
    <ul>
        <li><input type="text" id="type"/></li>
    </ul>
</div>

jquery

function closer(){
    $('#box a').on('click', function() {
       $(this).parent().parent().remove(); 
    });
}
$('#type').keypress(function(e) {
    if(e.which == 13) {//change to 32 for spacebar instead of enter
        var tx = $(this).val();
        if (tx) {
            $(this).val('').parent().before('<li><span>'+tx+'<a href="javascript:void(0);">x</a></span></li>');
            closer();
        }
    }
});

this adds when enter is pressed, so it will work like lord of the rings instead of lord of the rings. change e.which == 13 to e.which == 32 if you want spacebar to trigger it.

it will still need css changes to make it look exactly how you would like, this is just an example of how it works.

made a fiddle: http://jsfiddle.net/filever10/bjBQZ/

FiLeVeR10
  • 2,135
  • 1
  • 10
  • 11
  • Hi there, this worked, but I eventually made use of Select2 found [here](http://ivaynberg.github.io/select2/) – sim1 Dec 18 '13 at 19:05