Javascript 如何将隐藏搜索功能添加到我的脱机收藏网站_Javascript_Jquery_Html

Javascript 如何将隐藏搜索功能添加到我的脱机收藏网站

javascript jquery html

Javascript 如何将隐藏搜索功能添加到我的脱机收藏网站,javascript,jquery,html,Javascript,Jquery,Html,首先，我几乎没有html或js等方面的经验。请认为我是noob:）我有一个离线网站（基本上是图像，当我点击它们时，它们会指向方向），但是因为现在有很多图像，我想添加一个搜索功能这是我的代码--> 图.图像{ 显示：内联块；边际：0px；填充顶部：20px；垫底：25px；右边填充：24px；左侧填充：20px；宽度：225px；高度：340px； } （random.js只是一个为图像提供随机顺序的脚本）我发现这个话题几乎满足了我的需求这是代码--> 在这个例子中，我

首先，我几乎没有html或js等方面的经验。请认为我是noob:）我有一个离线网站（基本上是图像，当我点击它们时，它们会指向方向），但是因为现在有很多图像，我想添加一个搜索功能

这是我的代码-->


图.图像{
显示：内联块；
边际：0px；
填充顶部：20px；
垫底：25px；
右边填充：24px；
左侧填充：20px；
宽度：225px；
高度：340px；
}

（random.js只是一个为图像提供随机顺序的脚本）

我发现这个话题几乎满足了我的需求

这是代码-->

在这个例子中，我需要解决两个问题。首先，我想使这段代码适应我的站点，但我尝试的东西没有改变任何东西。（老实说，我只是随机尝试了一下，希望它能奏效）

第二，我想隐藏搜索框。我想创建一个类似这样的东西-->（抱歉，我找不到更好的例子）比如当他写“sni”时，它只会突出显示里面有“sni”的东西。突出显示是完美的，但隐藏也可以。

好的，如果我能很好地理解你的问题，你需要： -将图像存储在一个键值结构中，如hashmap，您可以按照此操作创建图像，基本上类似于

imagelist[image1]

将返回

image1

。 -在页面中放置一个空的

div

标记，并给它一个

id

。

-在ready调用之后并在其回调中编写一个键盘侦听器（这是

$（文档）中的函数）。ready（function（）{}

thingy）编写一个函数，该函数将首先将用户输入的文本注入到我们之前创建的

div

标记中，然后它将在图像词典中查找（我们之前制作的存储）使用

regex

（google it）搜索并返回所需图像，之后您可以使用它做任何您喜欢的事情。

我猜您指的是可扩展或可折叠的搜索框？如果是这样，您可以很容易地合并jquery（它执行“实时搜索”）如果可能的话，我不想要任何类型的搜索框。我只想打开我的页面，然后立即开始键入以查看结果。就像视频一样。关于您发送的网站，我不能说我了解一些内容：/I我不确定如何使用所有这些代码，顺序等。抱歉：（嘿，谢谢你的回答。老实说，我几天来一直在尝试自己创造一些东西，但就像我说的，我几乎没有经验，根本无法取得任何进展。我不会撒谎，我也不太明白你的答案。我问这个问题是因为我希望看到一个我可以根据你的答案编辑的示例代码对我的图片来说。因为现在我觉得我在努力学习中文语法，却一点也不懂中文字母：/代码太大/太难了？我希望它不会太难，因为搜索功能在网站上很常见。如果你用谷歌搜索我告诉你的大部分内容，你可以自己做，你只需要投入时间和优势过度复制粘贴一些代码的好处在于，您将能够自定义它，并在学习过程中使其变得更好，如果您想要一些准备好的代码，您将尝试进行调整（如果您是初学者，这非常困难），那么就在github上寻找类似的开源项目，并完成它。

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