搜索栏联想词提示

最新推荐文章于 2024-03-14 17:51:02 发布

原创

最新推荐文章于 2024-03-14 17:51:02 发布 · 1.6k 阅读

5 ·

CC 4.0 BY-SA版权

本文探讨了搜索引擎中搜索栏的联想词提示功能，当用户输入关键词时，程序自动提供可能的搜索建议，简化搜索过程。通过案例展示了该功能的实现效果，并提供了相关的HTML、CSS和JavaScript代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在我们需要游览一些网站的时候，我们经常需要使用搜索引擎来进行搜索，无论是百度谷歌还是搜狐等，我们都需要在搜索栏中输入相关的搜索词，当我们点击进行输入的时候，下面会给出许许多多的提示词，程序自动联想你可能输入的内容，所以往往我们只输入了一个词就看到了我们想要的题目直接点击进行搜索就行了。

那麽我们如何来实现如上所说的联想词提示的搜索效果的呢？？？

首先我们来看一下效果
在这里插入图片描述

如上图所示效果非常完美，那麽程序到底如何呢？

程序展示

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>相似查询</title>

		<link rel="stylesheet" type="text/css" href="css/style.css" />

	</head>
	<body>
		<script src="/demos/googlegg.js"></script>

		<div id="out">
			<div id="ser_box">
				<input type="search" id="ipt" /><span><input id="su" value="搜索一下" class="bg s_btn" type="submit"></span>
			</div>

			<div id="bot_box">
				<ul id="oul"></ul>
			</div>
		</div>

		<script src="js/style.js" type="text/javascript" charset="utf-8"></script>

	</body>
</html>

style.css

* {
   
   
	margin: 0;
	padding: 0;
}

#out {
   
   
	width: 500px;
	height: 140px;
	margin: 300px auto;
}

#ser_box {
   
   
	width: 500px;
	height: 32px;
	border: 1px solid blue;
	text-align: center;