Advanced search , propagate input field with clicked text

Question

Perhaps not the best title explanation.

I have an issue I am trying to overcome.

What I have is an advanced search page I am trying to make, and on this page is a input box ( for users to type in or add keywords )

Essentially, to add a keyword, we will post some tags below the input field like this:

[ apple ] , [ banana ] etc.

If user clicks the tag, above I want that text to be added to the input field on page. Adding a delimiter , possibly comma after each word.

The tags will eb extraced from our db, based on popularity, and also we will hook in autocomplete for user typed text.

So my question is : How do I get clicked text into the input field, and add a delimeter.

I have searched all over the place, any help appreciated.

Basic Fiddle: http://jsfiddle.net/ozzy/Qt3K6/

Answer 1

You can bind the click event to the links and modify the input textbox.

So, for example, you can assign each tag anchor a class, say, tag , and do the following:

$('.tag').click(function(evt) {
    var tags = $('#tags').val();
    var newTag = (tags == '') ? $(this).html() : ', ' + $(this).html();
    $('#tags').val(tags + newTag);
});

See this in action: http://jsfiddle.net/william/Qt3K6/1/ .