javascript - 搜索没有数据库的图像？

Question

我用 HTML 制作了一个销售摄影作品的网站（使用 div，而不是表格和 lightbox.js）。有没有办法在不制作数据库的情况下在 Java 或 PHP 中添加图像搜索功能？如果是这样，请详细说明我应该使用哪些格式/库。我是一名应届毕业生，我已经在网上和 stackoverflow 上搜索了两天，找到了一些零碎的东西，但没有什么能让我从头到尾。谢谢你

Answer 1

我不知道这是否像您正在寻找的东西，但是使用 JQuery 您可以使用自动完成功能进行简单的“搜索”。

第一：使您的图像具有与您要搜索的“名称”等效的 ID。与此类似的东西：

<div id="img1">
    <img id="Image1" alt="Image 1" />
</div>
<div id="img2">
    <img id="Image2" alt="Image 2" />
</div>
<div id="img3">
    <img id="Image3" alt="Image 3" />
</div>

第二：然后您可以将所有“img”标签 ID 放入一个数组中，并制作一个 JQuery UI ( http://jqueryui.com/autocomplete/ ) 自动完成输入字段，如下所示：

HTML

<input id="autocomplete" />

jQuery

var images = new Array();
$("img").each(function() {
    images.push($(this).attr("id"));
});

$("#autocomplete").autocomplete({
    source: images
});

现在您在自动完成/搜索字段中拥有了图像 ID（名称），您可以添加一个按钮，在选定的自动完成图像 ID 上“搜索”并仅显示该图像。

HTML

<button id="search">View Image</button>

jQuery

$("#search").click(function() {
    var field = $("#autocomplete").val();
    $("img").hide(); //Hide all images
    $("#"+field).show();
});

我希望这会有所帮助，即使它不是您想要的。完整的演示在这里：JSFiddle