单击div，将其添加到搜索查询输入

Question

我基本上试图允许用户点击“最近的搜索标签”并将其完整添加到搜索输入中。 “完整”的意思是标签的样式和文字。

例如：

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

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

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

非常感谢任何帮助。谢谢！

Answer 1

你可以通过将输入框放在输入框下（w / transparent bg）来显示“输入框”中的样式标记（类似于谷歌的自动完成功能）

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

<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（fullscreen）

这会使用适用于现代浏览器的oninput事件（ala $input.bind('input'...）（有关详情，请参阅On input change event?）

Answer 2

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

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