Using Bootstrap how to display selected divs from a list of divs in input with close button

Question

Could you please check the link and help me for below mentioned criteria:

On above link if I click on DOCUMENT TAB then it will be disappear from its panel and will appear in Search Input Box with a close button, so that if I click the CLOSE BUTTON then again it will disappear and will appear in its own panel again.

I have used Bootstrap.

<div class="container-fluid">
<div id="gstContainer" style="margin:20px auto 20px auto;">

<div class="well well-lg" id="search-facet-container">
<div class="row">


<div class="col-sm-9 col-md-9 col-lg-9">
    <form class="form-horizontal" role="form">
    <span class="form-horizontal"><input type="text" class="form-control" id="searchinput"></span>        
    </form>
</div>


</div> 

<div id="facet" class="row" style="margin:20px auto;">
     <div style="margin: 0px 2px 2px 0px; float: left;"><a class="btn btn-primary">Documents</a></div>
     <div style="margin: 0px 2px 2px 0px; float: left;"><a class="btn btn-primary">Collaboration</a></div>
     <div style="margin: 0px 2px 2px 0px; float: left;"><a class="btn btn-primary">Intranet & Web</a></div>
     <div style="margin: 0px 2px 2px 0px; float: left;"><a class="btn btn-primary">Contact & Knowledge</a></div>
     <div style="margin: 0px 2px 2px 0px; float: left;"><a class="btn btn-primary">Media</a></div>
     <div style="margin: 0px 2px 2px 0px; float: left;"><a class="btn btn-primary">Products</a></div>
     <div style="margin: 0px 2px 2px 0px; float: left;"><a class="btn btn-primary">Sales & Marketing</a></div>

 </div>
</div>

Answer 1

Jsfiddle

My fiddle basically adds text to the input box on click of one of your buttons. There is so much more you could do with it.

In my humble opinion, putting the buttons in the input box doesn't sound possible (I might be wrong) but if you change that input box to a div then your links/buttons can be sent there on click but nevertheless if you want to achieve something like that: you can either clone the button/link then append it's clone to the div if you decide to go with the div idea.

 $('body').on('click', '.tosearch', function(e) {


     var clone = $(this).clone();//this is how the clone should work.
     $(this).find("a").addClass("selected");

     $('#searchinput').val($('#searchinput').val() + " " +$(this).attr("value"));

 });