Question

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

我一直在寻找将其实施到我的网站中的最佳方法。任何标准的搜索栏实现类型都无法真正满足我的需求。我是否需要从头开始创建一些东西？我精通html和css，但我对php等一无所知。因此，太复杂了，我可能做不到，如果可能的话，我不想购买服务。

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

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

我真的不需要完整的搜索系统。我只需要一个搜索栏，该页面上仅显示图像。如果有人有任何建议，只是为这种想法的正确方向提供指导将非常有帮助。我问这个问题很傻，但是我已经研究了几个小时，却没有真正找到合适的解决方案。谢谢。

更新**为了澄清，我的网站有多个页面-每个页面都属于一个特定的艺术家。每个艺术家都将具有相同事物的图像（风景图像，学校图像，海滩图像），并且目标是显示从多位艺术家到混合在一起的一页中的相同类型的任何图像。

Answer 1

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

1.从exif读取可搜索的数据；最好，如果您进行了大量更改，然后将它们从lightroom或类似的文件中导出；

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

3.不使用js（只是个大障碍）：使用不可见的文本和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进行检查。如果我输入“天蓝色”而不是“蓝天”怎么办？嗯让我们创建一个更大的索引，其中每个单词都映射到结果数组。

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。

要获得更有效的解决方案，您将需要了解服务器端编码以及数据库。要了解有关搜索引擎使用的技术的更多信息，斯坦福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>

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

2 个答案: