搜索动态网页的功能

Question

我有一个包含多个图像的网页，它使用带有模式的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“的形式输入搜索文本，则应该显示具有搜索文本名称的图像。

我能遵循什么技术、库或过程？是否有可能只通过前端来处理这件事，还是直到后端才会渗出？

任何指点都是非常感谢的！

Answer 1

我建议你阅读这一页http://api.jquery.com/find/并尝试

Answer 2

一种方法是将所有图像显示在一个页面上，并让同位素插件负责过滤。下面是指向过滤文档的链接。作为一个奖励，它提供了花哨的CSS效果，使排序成为一种真正的乐趣;)

您可以通过键入搜索字段这里来找到地址过滤的代码。

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

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

编辑

这里是关于如何使用搜索场和同位素进行过滤的另一个例子。

Answer 3

我认为最好的方法是用后端。您应该让您的服务器返回一个只包含相关映像的json文件，然后您的客户端不必处理该文件，甚至可以缓存它。

否则，客户端只需要循环遍历所有的图像“条目”，并在名称中使用.indexOf搜索查询。然而，这将给客户端带来更多的工作，并且可能会使您的站点变得更慢。