如何使用JavaScript / jQuery显示通过文本框进行的最近搜索?

时间:2014-09-25 04:26:50

标签: javascript jquery

我想要实现的是,当我专注于搜索栏时,它应该显示我在此会话期间完成的最近搜索列表,我应该能够选择其中一个,它应该出现在教科书上。< / p>

任何帮助表示赞赏。如果可能的话,我想将这些最近的搜索数据存储到浏览器缓存中,这样每当我到达这个网站时,它都会显示给我的列表。

提前致谢。

2 个答案:

答案 0 :(得分:0)

假设您将使用基于Web的语言(如html或JavaScript),一个良好的开端是将每个搜索存储在一个数组中。

使用javascript和jQuery库,每次用户点击按钮时,您都可以轻松地将项目添加到数组中。

JavaScript的:

var myArray = [];
myArray.push($('#yourTextBox').val());

然后你可以使用jquery的$ .each函数来显示DOM元素中的每个项目。

请参阅下面的示例:(我在jquery 1.11中使用了HTML和javascript)

http://jsfiddle.net/1ncf0b6f/3/

答案 1 :(得分:0)

TL; DR我已经编写了一个库来处理这种+极端情况,有关用法,请参见https://github.com/JonasBa/recent-searches#readme

您应将最近的搜索对象存储在LocalStorage中并进行检索,然后根据实现方式决定如何呈现它们。显然,这需要考虑一些极端情况,这就是为什么我编写了一个库来做到这一点的原因,请参见下面的示例

示例 到期日: 假设某人搜索了一个查询iPhone,但是在一个月前搜索了一个查询repairing iPhone,则修复iPhone查询可能已过时。

最近搜索的排名 在进行前缀搜索时,排名也一样,如果用户在3小时之前进行了“苹果电视”查询,而在8小时之前进行了“电视电缆”查询,而现在他们在搜索“电视”,则您可能想要实现以下排名系统这两个。

安全处理存储空间 只需写入LocalStorage就会产生大量的JSON,您每次都需要对其进行解析,从而逐渐降低应用程序的速度,直到达到极限并失去此功能。

我建立了一个近期搜索库,可以帮助您解决所有问题。您可以通过npm使用它并找到它here。它将帮助您解决上述所有问题,并让您真正快速地建立最新搜索!