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

Posted 2023-05-08

【中文标题】有没有办法通过使用自动完成来缓存和显示搜索列表

【英文标题】：Is there a way to cache and display searched list via using autocomplete

【发布时间】：2020-06-30 17:26:25

【问题描述】：

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

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

这是下面的小提琴来看看它。我想知道是否可以像我打算使用的那样使用自动完成的源功能。

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

【问题讨论】：

这里的逻辑没有意义。当我第一次进行搜索时，list 将有 0 个项目。因此，此时自动完成功能无法提供帮助。您需要某种类型的来源。现在，如果您想捕获选定的搜索项并首先获得最高点击量，那么可以做到。

【参考方案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/

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

【讨论】：

工作顺利。我将它轻松绑定到一个按钮以清除缓存。

当光标在文本框中闪烁时，我无法看到列表。这需要任何配置吗？

@chatay 看这里：api.jqueryui.com/autocomplete/#method-search