Click on a div, add it to the search query input

Question

I'm basically trying to allow the user to click on a 'recent search tag' and add it to the search input in full. What I mean by 'in full' is the tags' styling along with text.

For example:

When clicking on a recent search tag, add it to search.

I know there's a jquery plugin for this. But I really wanted to know if there was a simple approach in getting this done.

I have a jsfiddle. Right now when I click on the recent search tag, it takes the text of each div and one at a time.

$('.tag').click(function(e){
     var tag = $(this).children().html();
     $('input').val(tag);
     e.preventDefault();
});

Any help is greatly appreciated. Thanks!

You can not insert HTML into an input, although you can insert HTML into a contentEditable div pretending to be an input. — Asad Saeeduddin, Oct 25 '12 at 18:40
@Asad Thank you for the advice. I have another question. If the user clicks on one or more tags. How do I get each selected text to show within the search? Because as of right now I can only do one at a time. — Modelesq, Oct 25 '12 at 18:56

score 1 · Accepted Answer · edited May 23 '17 at 12:12

you can get the styled tags to show "in" the input box by placing them under the input (w/transparent bg) (similar to what Google does with their autocomplete functionality)

Setup some markup around the input (input wrapper and a container for the tags):

<div class="input-group">
    <div class="tag tag-input"></div>
    <input name="q" id="search" class="input-text" multiple="multiple" placeholder="Search..." autocomplete="on" value="" />
</div>

Position the tag-input to be inline with the text, set the input to a wider word-spacing so the tags are spaced equally. Set the tag-input z-index lower than the input's. It'll also adjust the input width as the user types a long query.

jsfiddle (fullscreen)

This uses the oninput event (ala $input.bind('input'...) which works in modern browers (see On input change event? for more info on that)

score 0 · Answer 2 · answered Oct 25 '12 at 19:06

0

$('.tag').click(function(e){
    var tag = $(this).children().html();
    $('input').val(function(i,v){return v+" "+tag});
    e.preventDefault();
});

will add tags instead of replacing them.

answered Oct 25 '12 at 19:06

Asad Saeeduddin

46,193
6
90
139

Click on a div, add it to the search query input

2 Answers2