百度搜索框提示功能简单实现

最新推荐文章于 2021-12-05 12:08:02 发布

天南韩立

最新推荐文章于 2021-12-05 12:08:02 发布

阅读量1.4w

点赞数 9

分类专栏： HTML JavaScript 文章标签：百度搜索提示功能搜索框

JavaScript 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

HTML

23 篇文章 1 订阅

订阅专栏

效果图如下:

在搜索框中输入的时候会有百度的智能提示。

代码也很简单，整个html只有24行，关键的代码不超过10行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度搜索框提示功能</title>
		<style>
			/*这里修改提示框的字体样式*/
			.bdSug_wpr{
				color: black;
			}
		</style>
	</head>
	<body>
		<!-- 百度搜索框 -->
		<form action="http://www.baidu.com/baidu" target="_blank">
			<input name=tn type=HIDDEN value=baidu>
			<a href="http://www.baidu.com/"><img src="http://img.baidu.com/img/logo-80px.gif" alt="Baidu" align="bottom" border="0"></a>
			<input id="kw" type=text name=word size=30 baiduSug=1>
			<input type="submit" value="百度">
		</form>
		<!-- 百度搜索框提示 -->
		<script charset="gbk" src="http://www.baidu.com/js/opensug.js"></script>
	</body>
</html>