如何为我的网站实现自定义图片关键字搜索？

Question

我想在我的网站上提供关键字搜索，显示与搜索关键字相关的图像列表/网格。

我一直在努力寻找在我的网站中实现这一点的最佳方式。任何标准的搜索栏类型的实现都不能真正给我想要的东西。我必须从头开始创建一些东西吗？我精通 html 和 css，但我对 php 等一无所知。所以任何太复杂的东西，我可能无法做到，如果可能的话我不想购买服务。

我不确定是否需要以某种方式使用变量？或者如果我可以基于替代文本创建搜索结果？例如，图像具有“日落海滩”的替代文本，用户搜索“海滩”，该图像成为结果之一并显示图像 - 而不仅仅是图像的链接。

我所有的图片都是通过网址。我不将这些图像存储为文件。 图片在多页表格中的格式为<a href="linktooriginalimagepage.com"><img src="theimage.com" alt="this is an image"></a>。

我真的不需要完整的搜索系统。我只需要一个在页面上只显示图像的搜索栏。如果有人有任何想法，只需为此类想法提供正确方向的指针就会非常有帮助。我觉得问这个问题很愚蠢，但我已经研究了几个小时，并没有真正找到正确的解决方案。谢谢。

更新**澄清一下，我的网站有多个页面 - 每个页面都属于特定的艺术家。每个艺术家将拥有相同事物的图像（风景图像、学校图像、海滩图像），目标是将来自多个艺术家的任何同类图像混合在一起显示在一个页面上。

Answer 1

您可以使用 javascript 轻松做到这一点；
这种情况有多种选择；

1.从exif中读取可搜索的数据；最好是对图片进行大量更改并从 lightroom 或类似工具中导出它们；

2.创建一个带有您要搜索的标签的文件；

3. 不带js（只是一个bodge）：使用不可见文本和strg+f；

Answer 2

一个非常基本的解决方案是创建一个字典来将替代文本映射到图像 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 进行检查。如果我输入“sky blue”而不是“blue sky”怎么办？嗯。让我们创建一个更大的索引，其中每个单词都映射到一个结果数组。

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]
}

这是一个非常基本的inverted index。请注意，我已经删除了stop word '和'。我还包含了键 'mountain' 而不是 'mountains'。这称为stemming。

要获得更高效的解决方案，您需要了解服务器端编码以及数据库。如需了解更多关于搜索引擎使用的技术，Stanford Information Retrieval 这本书是一个很好的免费资源。看看您是否可以改进下面的示例。

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>