Question

首先，我对html或js等的体验几乎为零。请认为我是noob :) 我有一个离线网站（基本上是图像，单击这些图像时会显示方向），但是由于现在有很多图像，我想添加搜索功能。

<html>
<head>
<style>
figure.image {
  display: inline-block;
  margin: 0px;
  padding-top: 20px;
  padding-bottom: 25px;
  padding-right: 24px;
  padding-left: 20px;
  width:225px;
  height:340px;
}
</style>
</head>
<body>
<div class="images">
<figure class="image">
    <img src="Assets/x.png" alt="x";>
</figure>
<figure class="image">
    <img src="Assets/xx.png" alt="xx";>
</figure>
<figure class="image">
    <img src="Assets/xy.png" alt="xy";>
</figure>
<figure class="image">
    <img src="Assets/xz.png" alt="xz";>
</figure>
</div>
<script src="random.js"></script>
</body>
</html>

（random.js只是为图像赋予随机顺序的脚本）

我发现这个主题几乎可以满足我的需求。

how to implement Search function using Javascript or jquery

这是代码-> http://jsfiddle.net/Mottie/ztaz6/2/

在此示例中，我需要解决2个问题。首先，我想将此代码改编到我的网站，但我尝试进行的操作没有任何改变。（老实说，我只是通过尝试随机的东西就可以了）

第二，我想隐藏搜索框。我想创建一个看起来像这样的东西-> https://youtu.be/aOkirKWrHbU?t=85（对不起，我找不到更好的示例）就像他写“ sni”时一样，它只突出显示了其中带有“ sni”的内容。突出显示是完美的，但也可以隐藏它。

感谢阅读，请不要忘记我在回答时完全是菜鸟（请回答：D）

Answer 1

好吧，如果我很好地理解了您的问题，那么您需要：将图片存储在像哈希图这样的键值结构中，您可以按照以下JavaScript Hashmap Equivalent进行创建，基本上类似imagelist[image1]的东西会返回image1。 -在页面中放入一个空的div标签，并为其添加一个id。 -在就绪调用之后编写键盘监听器，并在其回调中（这是$(document).ready(function(){}中的函数）编写一个函数，该函数首先将用户输入的文本插入到div标签中首先创建，然后使用regex（在Google上进行搜索）将其查找到图像字典（我们之前制造的存储库）中，然后返回所需的图像，之后您可以使用它进行任何操作。另外，您应该让您的问题更明确，我知道这是一个有毒的社区，但您应该首先尝试使用Google搜索，如果找不到帮助，可以提出更详细的问题。

如何向我的离线收藏网站添加隐藏的搜索功能

1 个答案: