リストのいくつかの項目を検索バーに表示

Question

私はいくつかのリストを持っています。 LISTA： ITEM1、ITEM2 、 ... ListBの：項目をクリックで ITEM1、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(); 
    }); 
} 

、それははるかに高く評価されるだろう！ ありがとうございます

Answer 1

私はあなたがこのようなものと思っています。

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>