使用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"));

 });