可以实现关键词联想的，搜索框；集合了百度，谷歌，搜狗，360，腾讯等多家搜索
search.html的代码：
<!doctype html> <html> <head> <title>搜索框例子</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="https://www.jb51.net/article/js/jquery-2.1.3.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/article/js/keyword.js"></script> <link href="https://www.jb51.net/article/css/search.css" type="text/css"> <style type="text/css"> *{margin:0 auto} </style> </head> <body> <!--start search--> <div> <div> <div> <span>站内搜索</span> <span>百度搜索</span> <span>360搜索</span> <span>腾讯搜索</span> <span>搜狗搜索</span> <span>谷歌搜索</span> </div> <span></span> <form action="http://www.baidu.com/s" method="GET" target="_blank" > <input type="text" value="" x-webkit-speech="" lang="zh-CN" placeholder="点击搜索" autocomplete="off"><!--autocomplete 屏蔽输入自动记录--> <input type="submit" value="百度一下"> </form> <div></div> </div> </div> <!--end start--> </body> </html>
search.css的代码如下:
/*---------------------搜索框样式-------------------------------*/ #search_bg{ width: 960px; height:50px; } #search_bg #button_bg .seach_type{ display: block; width: 80px; height: auto; padding: 0px; border: solid 1px rgba(204,204,204,0.5); position: absolute; top:45px; left: 20px; display: none; z-index: 21; } #search_bg #button_bg .seach_type .type{ display: block; width: 80px; height: 26px; background: rgba(255,255,255,0.3); border-bottom:dashed 1px #cccccc; text-align: center; line-height:26px; cursor: pointer; } #search_bg #button_bg .seach_type .type:hover{ color: #126AC1; } #search_bg #button_bg .changetype{ display: block; width: 8px; height: 12px; position: absolute; top:20px; left: 30px; cursor: pointer; background: url(../images/class_1_16_1.png); } #search_bg #button_bg{ width:600px; height: 50px; position: relative; } #search_bg #button_bg .textb{ display: block; width: 400px; height: 36px; outline: none; background: none; border:solid 1px #CCCCCC; float:left; margin-top:5px; margin-left:20px; text-align: left; text-indent: 20px; font-size: 15px; } #search_bg #button_bg .subb{ display: block; width: 80px; height: 40px; outline: none; border: none; background: #1F76CB; float: left; margin-top:5px; cursor: pointer; box-shadow: 0 1px 2px rgba(28,116,203,0.5); color: #ffffff; font-size: 15px; text-shadow:0 1px 2px rgba(245,247,250,0.2); } #search_bg #button_bg .textb:focus{ border:solid 1px #1F76CB; } #search_bg #button_bg .subb:hover{ box-shadow: 0 1px 3px rgba(28,116,203,1); } #search_bg #button_bg .keyword{ width: 400px; height: auto; border:solid 1px #cccccc; border-top:none; position: absolute; top:45px; left:20px; z-index:40; box-shadow: 1px 2px 2px rgba(5,5,5,0.1); display: none; } #search_bg #button_bg .keyword span{ display: block; clear: both; width: 400px; height: 30px; text-indent:15px; line-height: 30px; cursor: pointer; background: rgba(255,255,255,0.3); border-bottom:dashed 1px #cccccc; } #search_bg #button_bg .keyword span:hover{ background: rgba(0,0,0,0.5); } /*------------------seach结果集样式---------------------*/ #search_result{ width: 960px; height: auto; min-height: 400px; overflow: hidden; } #search_result .result_num{ width: 960px; height: 26px; text-align: left; text-indent: 15px; font-size: 15px; line-height: 26px; color:#767676; } #search_result .result{ width: 960px; height: auto; max-height: 110px; margin-top:15px; margin-bottom: 15px; padding-top: 15px; padding-bottom: 15px; text-indent: 20px; line-height: 25px; color: #333333; text-overflow: ellipsis; overflow: hidden;/*以上三行实现溢出显示省略号*/ border-bottom:dashed 1px #cccccc; } #result_page{ width: 960px; height: 30px; } #result_page a{ display: block; float: left; margin-left:5px; width: 30px; height: 30px; text-align: center; text-decoration: none; line-height: 30px; background: none; color: #363636; border:solid 1px #A5A5A5; transition:all .5s linear; -webkit-transition: al.5s linear;/* Safari and Chrome or liebao*/ -moz-transition: all .5s linear;/*Firefox */ -o-transition: all .5s linear;/*Opera */ -ms-transition: all .5s linear;/*for ie*/ } #result_page a:hover{ color:#0A67C1; border:solid 1px #0A67C1; } #result_page .nowpage{ border:solid 1px #EAE8E8; color:#0F9512; } #result_page .previous, #result_page .next{ width: 80px; height: 30px; }
keyword.js的代码如下: