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

一种方法是在一个页面上显示所有图像，并让isotope插件处理过滤。这是docs on filtering的链接。作为奖励，它带有花哨的CSS效果，这使得排序成为一种真正的乐趣;）

您可以通过在搜索字段here中输入来找到解决过滤问题的代码。

它基本上是通过将图像的名称添加为类名来实现的，只显示与搜索匹配的名称，同时隐藏其他类。

但是，如果您必须处理大量图像，这可能不是一个理想的解决方案，因为所有图像都是预先加载以使其工作。在这种情况下，服务器端处理搜索将是最佳选择。

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

Answer 2

我建议您阅读此页http://api.jquery.com/find/并尝试

Answer 3

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

否则客户端只是循环遍历所有图像“项目”，并在名称中搜索.indexOf的查询。但是，这会给您的客户端带来更多的工作，并可能使您的网站变慢。

Answer 4

如果您想将它全部保留在前端，可以使用underscore.js。有几种方法可以过滤数组/对象，请参阅：http://underscorejs.org/#filter。您将使用正则表达式查询以匹配所有项目名称，例如：

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) });

这将返回一个只有莲花的对象，以及所需的所有图像。请参阅小提琴：http://jsfiddle.net/cbM5W/1/

这确实使用了下划线库，但您可以使用vanilla JS实现此功能。

搜索动态网页的功能

4 个答案: