Отображение нескольких элементов списка в строке поиска

Question 1

У меня есть несколько списков. 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();
  });
}

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

javascript search

1

Hans 29 Июл 2017 в 09:44

Вы можете сделать это демо?

–

Niklesh Raut

29 Июл 2017 в 09:55

Вот сценарий: jsfiddle.net/umraaf9v При нажатии на элемент списка я пытаюсь добавить значение один за другим. и другое вроде этого: элемент A1, элемент A2, элемент B1 и т. д.… в поле поиска вместо того, чтобы значения заменяли друг друга в этом поле. Спасибо!

–

Hans

29 Июл 2017 в 11:10

Answer

Я полагаю, вы хотите что-то вроде этого.

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

Question 2

Я полагаю, вы хотите что-то вроде этого.

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

Отображение нескольких элементов списка в строке поиска

1 ответ

Похожие вопросы

Новые вопросы

javascript