有没有办法通过使用自动完成来缓存和显示搜索列表

Question

我正在尝试缓存输入到搜索区域的内容，然后将其用于其他搜索。查看下图，了解我想要实现的目标。

有些人可能想知道为什么我没有使用 表单自动完成属性。原因是没有删除缓存数据。我想将它绑定到一个按钮以清除所有缓存的数据，但是据我所知唯一的方法是禁用自动完成属性。如果我错了，请纠正我。因此我决定使用本地存储。

下面是fiddle看一下。我想知道是否可以像我打算使用的那样使用自动完成的源功能。

 <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/

每次提交表单时，都会更新本地存储。然后在自动完成中使用它。

有没有办法通过使用自动完成来缓存和显示搜索列表

Is there a way to cache and display searched list via using autocomplete

jquery

jquery-ui

local-storage

jquery-ui-autocomplete