點擊一個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，將其添加到搜索查詢輸入

回答

相關問題