使用Bootstrap如何顯示帶有關閉按鈕的輸入中的div列表中的選定div

Question

您能否檢查鏈接並為我提供以下提及的條件：

在上面的鏈接上，如果單擊“文檔”選項卡，它將從其面板中消失，並顯示在帶有關閉按鈕的“搜索輸入框”中，因此，如果我單擊“關閉”按鈕，它將再次消失並再次出現在其自己的面板中。

我用過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

我的小提琴基本上是通過單擊您的按鈕之一將文本添加到輸入框的。 您可以做更多的事情。

以我的拙見，將按鈕放在輸入框中似乎是不可能的（我可能是錯的），但是如果將輸入框更改為div，則可以在單擊時將鏈接/按鈕發送到此處，但是如果您願意，實現類似的效果：您可以克隆按鈕/鏈接，然后將其克隆附加到div（如果您決定使用div創意）。

 $('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"));

 });