能否利用Autocomplete的source函数结合LocalStorage实现可清除的搜索缓存？

当然可以！你的思路完全可行——用LocalStorage替代原生表单的autocomplete属性，确实能解决无法手动清空缓存的问题。不过现有代码里有几个关键细节需要调整，才能让Autocomplete正常读取LocalStorage里的缓存内容，同时实现你想要的全清功能。

核心问题修正 #

首先要注意：LocalStorage存储的是JSON字符串，而jQuery UI Autocomplete的source需要接收数组格式的数据，所以读取时必须用JSON.parse()解析，直接用localStorage.getItem()拿到的字符串是无法被Autocomplete识别的。

另外，现有代码里提交表单时循环LocalStorage所有key的逻辑没必要（你只需要操作items这一个key），而且每次重新初始化Autocomplete也不是最优方式，应该用option()方法动态更新source。

修正后的完整代码 #

<form>
  <input type="text" id="myInput">
  <button type="submit">提交</button>
  <button type="button" id="clearCache">清空缓存</button>
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

<script>
// 初始化：从LocalStorage读取缓存，解析为数组（如果没有则为空数组）
let cachedItems = JSON.parse(localStorage.getItem('items')) || [];

// 初始化Autocomplete
$('#myInput').autocomplete({
  source: cachedItems
});

const form = document.querySelector('form');
const input = document.getElementById('myInput');
const clearBtn = document.getElementById('clearCache');

// 表单提交逻辑
form.addEventListener('submit', function(e) {
  e.preventDefault();
  const inputVal = input.value.trim();
  
  // 避免重复添加空值或已存在的内容
  if (inputVal && !cachedItems.includes(inputVal)) {
    cachedItems.push(inputVal);
    localStorage.setItem('items', JSON.stringify(cachedItems));
    // 动态更新Autocomplete的source
    $('#myInput').autocomplete('option', 'source', cachedItems);
  }
  
  input.value = "";
});

// 清空缓存按钮逻辑
clearBtn.addEventListener('click', function() {
  cachedItems = [];
  localStorage.removeItem('items');
  // 更新Autocomplete为空数组，不再显示缓存建议
  $('#myInput').autocomplete('option', 'source', cachedItems);
});
</script>

关键说明 #

1. 初始化逻辑：页面加载时先读取LocalStorage里的items，用JSON.parse()解析为数组，如果没有缓存则默认用空数组，确保Autocomplete初始化时有合法的source。
2. 提交优化：添加了空值和重复值的判断，避免缓存无效内容；提交后用autocomplete('option', 'source', 新数组)动态更新建议列表，不用重新初始化组件。
3. 清空功能：点击清空按钮时，清空数组、删除LocalStorage里的items，同时更新Autocomplete的source为空，彻底清除缓存提示。

补充：关于原生autocomplete的缓存清除 #

其实原生表单的autocomplete缓存，部分浏览器可以通过在输入框设置autocomplete="off"然后再重新打开，或者清除浏览器的表单数据来清除，但确实没有统一的JS API可以手动触发清空，所以你的LocalStorage方案更可控、更符合需求。

内容的提问来源于stack exchange，提问作者chatay