Jquery 单击一个div，将其添加到搜索查询输入中

我基本上是想让用户点击一个“最近的搜索标签”，并将其完整地添加到搜索输入中。我所说的“完整”是指标签的样式和文本

例如：

我知道这有一个jquery插件。但我真的很想知道是否有一个简单的方法来完成这件事

我有一本书。现在，当我点击最近的搜索标签时，它会获取每个div的文本，一次一个

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

非常感谢您的帮助。谢谢

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

---

将添加标签，而不是替换标签。

您可以通过将样式化标签放在输入框下（w/transparent bg）将其显示在输入框中（类似于Google的自动完成功能）

围绕输入设置一些标记（输入包装器和标记容器）：

将

标记输入定位为与文本内联，将
输入设置为更宽的
字间距
，使标记间距相等。将
标记输入设置为低于输入的
z索引。它还将在用户键入长查询时调整输入宽度

（）

这使用了
oninput
事件（ala
$input.bind（'input'）…
），该事件在现代浏览器中工作（有关该事件的更多信息，请参阅）
您不能将HTML插入到输入中，尽管您可以将HTML插入到假装为输入的contentEditable div中。@谢谢您的建议。我还有一个问题。如果用户单击一个或多个标记，如何让每个选定的文本显示在搜索中？因为到目前为止，我一次只能执行一个。
<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>