有没有一种方法可以通过使用自动完成功能来缓存和显示搜索到的列表

Question

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

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

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

 <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

请考虑以下内容。

import { Plane, Camera, Cube} from './Objects';

工作示例：https://jsfiddle.net/Twisty/9dq2s80z/26/

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