是否可以使用自动完成功能来缓存和显示搜索到的列表

Question

我正在尝试将已键入的内容缓存到搜索区域中，然后将其用于其他搜索。请查看下面的图片，以查看我要实现的目标。

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

这是下面的小提琴来查看。我想知道是否有可能使用我打算使用的自动完成功能。

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/

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