我想在我的网站上提供一个关键字搜索，显示与搜索关键字相关的图像列表/网格。
我一直在努力找到将其实施到我的网站中的最佳方法。任何标准的搜索栏类型的实现都不会真正给我我想要的东西。我必须从头开始创建一些东西吗？我对html和css很了解，但我对php等一无所知。所以任何太复杂的事情，我都可能无法做到，如果可能的话，我不想购买服务。
我不确定我是否需要以某种方式使用变量？或者，我是否可以基于替代文本创建搜索结果？例如，图像具有"日落海滩"的替代文本，用户搜索"海滩"，该图像成为结果之一并显示图像 - 而不仅仅是指向图像的链接。
我所有的图片都是通过网址。我不将这些图像存储为文件。 图像的格式为<a href="linktooriginalimagepage.com"><img src="theimage.com" alt="this is an image"></a>在多个页面上的表格中。
我真的不需要完整的搜索系统。我只需要一个搜索栏，只显示页面上的图像。如果有人有这种想法，那么只是指向此类想法的正确方向的指针将非常有帮助。我觉得问这个问题很愚蠢，但我已经研究了几个小时，并没有真正找到正确的解决方案。谢谢。
更新** 澄清一下，我的网站有多个页面 - 每个页面都属于一个特定的艺术家。每个艺术家都会有相同事物的图像(风景图像、学校图像、海滩图像(和 目标是将来自多个艺术家的任何相同类型的图像显示到一个混合在一起的页面。
您可以使用JavaScript轻松完成此操作;
这种情况有多种选择;
1.从EXIF读取可搜索的数据; 最好是大量更改图片并从Lightroom或类似产品中导出它们;
2.使用要搜索的标签创建一个文件;
3. 没有JS(只是一个笨蛋(：使用不可见的文本和strg+f;
一个非常基本的解决方案是创建一个字典来将替代文本映射到图像 URL。
const index = {
'yellow rose flower': 'https://www.gstatic.com/webp/gallery3/1.sm.png',
'tree and blue sky': 'https://www.gstatic.com/webp/gallery/4.sm.jpg',
'mountains and blue sky': 'https://www.gstatic.com/webp/gallery/1.sm.webp'
}
将其包含在JavaScript文件中将消除对服务器端代码和数据库的需求。静态服务器就足够了。当用户键入搜索词时，您只需在索引中的键中搜索部分匹配项。
这带来了许多问题。如果我输入字母"e"，则立即显示所有结果。如果我只想要整个单词的结果怎么办？我当然可以使用JavaScript来检查这一点。如果我输入"天蓝"而不是"蓝天"怎么办？嗯。让我们创建一个更大的索引，其中每个单词都映射到一个结果数组。
const img1 = 'https://www.gstatic.com/webp/gallery/4.sm.jpg';
const img2 = 'https://www.gstatic.com/webp/gallery/1.sm.webp';
const index = {
'blue': [img1, img2],
'mountain': [img2],
'sky': [img1, img2],
'tree': [img1]
}
这是一个非常基本的倒排索引。请注意，我已经删除了停用词"and"。我还包括了关键的"山">而不是"山"。这称为词干提取。
对于更有效的解决方案，您需要了解服务器端编码以及数据库。为了了解更多关于搜索引擎使用的技术，斯坦福信息检索书是一个很好的资源，可以免费获得。看看是否可以改进下面的示例。
const index = {
'yellow rose flower': 'https://www.gstatic.com/webp/gallery3/1.sm.png',
'tree and blue sky': 'https://www.gstatic.com/webp/gallery/4.sm.jpg',
'mountains and blue sky': 'https://www.gstatic.com/webp/gallery/1.sm.webp'
}
const searchbox = document.getElementById('searchbox');
const results = document.getElementById('results');
// In the HTML, oninput="search()" ensures this function is called
// every time a user types into the searchbox
function search(){
clearContents(results); // remove previous results
const searchTerm = searchbox.value.toLowerCase();
// search the index for matching terms
for(const key in index){
if(key.includes(searchTerm) && searchTerm != ''){
const img = document.createElement('img');
img.src = index[key];
results.appendChild(img);
}
}
}
function clearContents(elem){
while(elem.firstChild){
elem.removeChild(elem.firstChild);
}
}<input id="searchbox" type="text" oninput="search()">
<div id='results'>
</div>