Есть ли способ кеширования и отображения списка поиска с помощью автозаполнения

Question

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

Некоторые из вас могут задаться вопросом, почему я не использовал атрибут автозаполнения формы . Причина в том, что не удаляются кэшированные данные. Я хочу привязать его к кнопке, чтобы очистить все кэшированные данные, однако единственный способ сделать это, насколько я знаю, отключить атрибут автозаполнения. Пожалуйста, поправьте меня, если я ошибаюсь. поэтому я решил использовать localalstorage.

Вот нижеприведенная скрипка, чтобы посмотреть на нее. Мне интересно, можно ли использовать функцию источника автозаполнения, как я намеревался использовать.

 <form>
    <input type="text" id="myInput">
 </form>


jQuery('#myInput').autocomplete({
    source: localStorage.getItem(key)
  });
var list = [];
const form = document.querySelector('form');
const input = document.getElementById('myInput');

form.addEventListener('submit', function(e) {
e.preventDefault();

list.push(input.value);
localStorage.setItem('items', JSON.stringify(list));
input.value = "";

console.log(list);

for (i = 0; i < localStorage.length; i++) {

let key = localStorage.key(i);
console.log("localStorage.getItem", localStorage.getItem(key));


  jQuery('#myInput').autocomplete({
    source: localStorage.getItem(key)
     });
    }
  });

https://jsfiddle.net/cagatay07/6gqfozpr/92/

Answer 1

Рассмотрим следующее.

$(function() {
  function getList() {
    return JSON.parse(localStorage.list) || [];
  }

  function saveList(arr) {
    localStorage.setItem("list", JSON.stringify(arr));
  }

  function updateList(item) {
    var l = getList();
    if (l.indexOf(item) < 0) {
      l.push(item);
    }
    saveList(l);
  }

  $("form").submit(function(e) {
    e.preventDefault();
    updateList($("#myInput").val());
    return true;
  });

  var list = getList();
  $("#myInput").autocomplete({
    source: list
  });
});

Рабочий пример: https://jsfiddle.net/Twisty/9dq2s80z/26/

Каждый раз при отправке формы обновляется локальное хранилище. Это затем используется в автозаполнении.