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

Question

我基本上是在尝试让用户单击“最近的搜索标签”并将其完整添加到搜索输入中。我所说的“完整”是指标签的样式以及文本。

例如：

我知道有一个 jquery 插件。但我真的很想知道是否有一种简单的方法可以完成这项工作。

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

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

任何帮助是极大的赞赏。谢谢！

Answer 1

您可以通过将样式标签放置在输入下方（带透明背景）来获取样式标签以显示“在”输入框中（类似于 Google 使用其自动完成功能所做的）

在输入周围设置一些标记（输入包装器和标签的容器）：

<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>

将 放置在tag-input与文本内联的位置，将 设置input为更宽word-spacing，以便标签等间距。设置tag-input z-index低于输入的值。它还会在用户键入长查询时调整输入宽度。

jsfiddle（全屏）

这使用在现代浏览器中工作的oninput事件（ala ）（有关更多信息，请参见On input change event? ）$input.bind('input'...

Answer 2

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

将添加标签而不是替换它们。