У меня есть несколько списков. ListA: item1, item2,… ListB: item1, item2,

При щелчке по элементу он отображается как значение в строке поиска. Мне нужно добавить несколько элементов из разных списков в качестве значений в строку поиска. Как и сейчас, при щелчке по элементу он заменяет только текущее значение в строке поиска.

Так что я могу, например, ввести в строке поиска: элемент A1 элементB2…

Вот код:

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();
  });
}

Если бы кто-нибудь мог мне помочь в этом, я был бы очень признателен! Спасибо

1
Hans 29 Июл 2017 в 09:44
Вы можете сделать это демо?
 – 
Niklesh Raut
29 Июл 2017 в 09:55
Вот сценарий: jsfiddle.net/umraaf9v При нажатии на элемент списка я пытаюсь добавить значение один за другим. и другое вроде этого: элемент A1, элемент A2, элемент B1 и т. д.… в поле поиска вместо того, чтобы значения заменяли друг друга в этом поле. Спасибо!
 – 
Hans
29 Июл 2017 в 11:10

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){
			  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>
0
Niklesh Raut 31 Июл 2017 в 12:44
Еще один вопрос, Риши: Вы знаете, можно ли удалить текст в поле и щелкнуть затем по другому элементу? Если я это сделаю, удаленный элемент снова появится в поле, как будто он хранится в памяти.
 – 
Hans
31 Июл 2017 в 10:15
Можете ли вы задать другой вопрос на примере, который трудно понять
 – 
Niklesh Raut
31 Июл 2017 в 10:23
На самом деле я пытаюсь иметь кнопку, которая может удалять значения индекса var. Таким образом, он удаляет или сбрасывает значения, отображаемые в строке поиска, чтобы вы могли начать новый поиск без старых значений.
 – 
Hans
31 Июл 2017 в 12:32
Большое спасибо, Риши! QuerySelector изменил то, что я пробовал самостоятельно.
 – 
Hans
31 Июл 2017 в 15:29
: ok, вы можете отправить мне 15 долларов, щелкнув правую галочку, чтобы люди знали, что вопрос решен.
 – 
Niklesh Raut
31 Июл 2017 в 15:35