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

我基本上试图让用户点击一个'最近的搜索标签'并将其添加到搜索输入完整。我的意思是“全面”是标签的样式和文字。点击一个div，将其添加到搜索查询输入

例如：

When clicking on a recent search tag, add it to search.

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

我有一个jsfiddle。现在，当我点击最近的搜索标签时，它将一次一个div和一个文本。

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

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

来源

2012-10-25 Modelesq

您不能插入HTML为输入，虽然可以将HTML插入到假冒输入的contentEditable div中。 –

@Asad谢谢你的建议。我有另一个问题。如果用户点击一个或多个标签。如何让每个选定的文字在搜索中显示？因为现在我只能一次做一个。 – Modelesq

可以拿到风格的标签通过将其放在下输入（W /透明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-inputz-index。它还会在用户输入长查询时调整输入宽度。

jsfiddle（fullscreen）

它使用oninput事件（ALA $input.bind('input'...），它在现代的browers工作（见On input change event?关于更多信息）

来源

2012-10-25 19:57:37 MikeM

这真是太棒了。我不能够感谢你！ – Modelesq

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

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

来源

2012-10-25 19:06:24

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

回答

相关问题