Javascript 动态网页的搜索功能

我有一个包含多个图像的网页，使用JSON文件加载，模式类似-

[
{ "item" : "Lotus",
   "images" : [ "images/lotus1.jpg", "images/lotus2.jpg", "images/lotus3.jpg" ]
 },
 { "item" : "Tulip",
   "images" : [ "images/tulip1.jpg", "images/tulip2.jpg", "images/tulip3.jpg" ]
 }
....
]

如果我想在页面上添加搜索功能，并仅动态显示相关图像

例如，如果用户想要搜索特定的花，并以“Tu”的形式输入搜索文本，则应显示具有搜索文本的名称的图像

我可以遵循什么技术、库或过程？是否可以只通过前端处理此问题，还是会一直渗透到后端

---

非常感谢您的指点

一种方法是在一个页面上显示所有图像，并让插件负责过滤。 这里有一个链接到。 另外，它还附带了花哨的CSS效果，使排序成为一种真正的乐趣；）

您可以通过在搜索字段中键入来查找解决筛选问题的代码

它的基本工作原理是将图像的名称添加为类名，只显示与搜索匹配的名称，同时隐藏其他类

但是，如果您必须处理大量图像，这可能不是一个理想的解决方案，因为所有图像都是提前加载的。在这种情况下，服务器端处理搜索将是一种可行的方法

编辑

---

是关于如何使用搜索字段和同位素进行过滤的另一个示例。

我建议您阅读本页并尝试使用我认为最好的方法是使用后端。您应该让服务器返回一个只包含相关图像的json文件，这样您的客户端就不必处理它，甚至可以缓存它

---

否则，客户端的问题就是遍历所有图像“项”，并在名称中使用

.indexOf

搜索查询。然而，这将在客户端投入更多的工作，并可能使您的站点速度变慢。

如果您想将所有内容都放在前端，可以使用下划线.js。有多种方法可以筛选数组/对象，请参阅：。您可以使用正则表达式查询以匹配所有项目名称，例如：

var images = [{ "item" : "Lotus", "images" : [ "images/lotus1.jpg", "images/lotus2.jpg", "images/lotus3.jpg" ]},{ "item" : "Tulip","images" : [ "images/tulip1.jpg","images/tulip2.jpg", "images/tulip3.jpg" ]}];
var searchResults = _.filter(images, function(obj){ return /lot/i.test(obj.item) });

这将返回一个对象，其中只有lotus和所需的所有图像。参见小提琴：

---

这确实使用了下划线库，但您可以使用vanilla JS实现这一点。

例如，如果用户输入搜索文本为“tu”，则应显示名称中包含“tu”的所有图像。