Блог

Главная - Вопросы по программированию - Сохранение истории поиска при вводе

Сохранение истории поиска при вводе

#javascript #input

#javascript #ввод

Вопрос:

у меня есть кнопка ввода и поиска, я хочу, чтобы при нажатии на ввод отображались значения, которые я искал ранее. и когда я нажимаю кнопку сохранить новое значение в истории, как я могу это сделать? вот что я пробовал, но ничего не делает. Спасибо

HTML:

 <input class="inp" type="text">
<button class="search"></button>

JS:

 
    let dd = document.querySelector('.inp').value;
    document.querySelector('.inp').name = dd;

Комментарии:

1. Сохраните его в array и просматривайте, когда захотите показать старые результаты поиска

2. Вы также можете использовать localStorage для долгосрочного сохранения.

3. Рассмотрите возможность использования библиотеки для этого типа, поскольку для использования в качестве всех предыдущих владельцев требуется input много search history работы. потому что этот ввод должен работать как выпадающий список, в котором хранятся все предыдущие выполненные вами поиски.

4. @AlwaysHelping Разве вы не можете просто использовать list атрибут?

5. @obsoleteawareproduceесть так много способов, но требуется некоторая работа, я привожу здесь идеи, чтобы помочь OP.

Ответ №1:

HTML:

 <input class="inp" type="text" list="searchdata">
<button class="search">Search</button>
<datalist id="searchdata"></datalist>

Скрипт:

 var searchHistory = (localStorage.searchHistory) ? JSON.parse(localStorage.searchHistory) : [];
document.querySelector(".search").addEventListener("click", () => {
  searchHistory.push(document.querySelector(".inp").value);
  localStorage.searchHistory = JSON.stringify(searchHistory);
});
document.querySelector(".inp").addEventListener("focus", () => {
  var data = document.querySelector("datalist#searchdata");
  data.innerHTML = "";
  searchHistory.forEach((search) => {
    data.innerHTML = "<option>"   data.innerHTML;
    data.querySelector("option").innerText = search;
  });
});