在搜索欄中顯示列表的幾個項目

我有幾個列表。利斯塔：物品1， ITEM2， ... 數組listB：物品1， ITEM2，在搜索欄中顯示列表的幾個項目

在點擊一個項目，它表現爲一個值到搜索欄。我需要將幾個不同的列表項作爲值添加到搜索欄中。就像現在一樣，只需點擊一個項目，它只會將當前值替換到搜索欄中。

所以我可以有例如在搜索欄：項目A1 itemB2 ...

下面是代碼：

var items = document.getElementById("index"); 
var item = items.getElementsByTagName("h3"); 
for(var i=0; i<item.length; i++) { 
    item[i].addEventListener("click", function(e) { 
    document.getElementById("search").value = (this.textContent || this.innerText); 
    recherche(); 
    }); 
}

如果有人可以幫助我在此，這將是非常感謝！謝謝

來源

2017-07-29 Hans

可以使這個演示？ – C2486

這裏是小提琴：https://jsfiddle.net/umraaf9v/ 在點擊一個列表項目，我嘗試像這樣一個接一個地添加值：項目A1項目A2項目B1等... 進入搜索字段在現場取代對方的價值。謝謝！ – Hans

我假設你想要這樣的東西。

var item = document.querySelectorAll("#index h3"); 
 
itemArr = []; 
 
for(var i=0; i<item.length; i++) { 
 
    item[i].addEventListener("click", function(e) { 
 
    var itemVal = (this.textContent || this.innerText); 
 
    var index = itemArr.indexOf(itemVal); 
 
    if(index == -1){ 
 
\t \t \t itemArr.push(itemVal); 
 
    }else if (index > -1) { 
 
     itemArr.splice(index, 1); 
 
    } 
 
    document.querySelector("#search").value = itemArr.join(","); 
 
    }); 
 
} 
 

 
function clearAll(){ 
 
    itemArr = []; 
 
    document.querySelector("#search").value = ""; 
 
}

h3{ 
 
    cursor:pointer; 
 
} 
 
.delete{ 
 
    cursor:pointer; 
 
    color:red; 
 
}

<input type="text" id="search"> <span class="delete" onclick="clearAll()">X</span> 
 
<div id ="index"> 
 
<h3>item A1</h3> 
 
<h3>item A2</h3> 
 
<h3>item B1</h3> 
 
<h3>item B2</h3> 
 
</div>

來源

2017-07-29 08:36:37 C2486

是的，這工作，謝謝你的幫助！ – Hans

還有一個問題Rishi：你知道是否有可能刪除文本到字段中，然後點擊其他元素？如果我這樣做，刪除的元素會出現在字段中，就像它保存在內存中一樣。 – Hans

你可以提出其他問題，例如它很難理解 – C2486

在搜索欄中顯示列表的幾個項目

回答

相關問題