js实现百度搜索提示框


Posted in Javascript onFebruary 05, 2017

效果如下所示

js实现百度搜索提示框

话不多说,请看代码:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>百度搜索提示框</title>
<style>
* { margin: 0;padding: 0; outline: none;}
.search101 {
 width: 650px;
 margin: 300px auto;
 font-size: 0;
} 
.sou1 { 
 width: 514px;
 height: 40px;
 color: #666;
 font: 16px Microsoft YaHei;
 border: 1px solid rgba(170,170,170,.9);
 border-right: 0;
 border-radius: 2px 0 0 2px;
 background: rgba(255,255,255,.9);
 padding: 0 30px 0 3px; 
 vertical-align: top; 
 display: inline-block;
 transition: .2s; 
}
.sou2 { 
 width: 100px;
 height: 42px;
 font: 16px Microsoft YaHei;
 color: rgba(255,255,255,.9); 
 background: rgba(0,170,240,1);
 border: 0;
 border-left: 1px solid rgba(0,170,240,1);
 border-radius: 0 2px 2px 0;
 margin: 0 0 0 -1px;
 vertical-align: top;
 transition: .3s;
 display: inline-block;
 cursor: pointer;
}
.sou2:hover {
 background: rgba(0,140,220,.9);
}
.sou1:focus {
 color: #333; 
 border: 1px solid rgba(0,170,240,1);
 border-right: none;
}
</style>
</head>
<body>
 <div class="search101">
 <form action="http://www.baidu.com/baidu" class="search-form" method="" id="search-form">
  <input id="ipt1" name="tn" type="hidden" value="baidu" >
  <input type="text" id="sou1" class="sou1" name="word" maxlength="8048" value="" placeholder="" baiduSug=1 onmouseover="focus()">
  <input type="submit" class="sou2" value="百度一下" >
 </form>
 </div>
<!-- 百度搜索提示 -->
<script charset="gbk" src="http://www.baidu.com/js/opensug.js"></script> <!-- we124.com/libs/js/opensug.js(无logo) -->
<script> 
 document.getElementById("sou1").focus(); 
 var txtObj = document.getElementById("alertSpan");
 //回调函数,用于获取用户当前选择的文字
 function show(str){
 txtObj.innerHTML = str;
 }
 var params = {
 "XOffset": 0,   //提示框位置横向偏移量,单位px
 "YOffset": 0,   //提示框位置纵向偏移量,单位px
 "width": 204,   //提示框宽度,单位px
 "fontColor": "#666",  //提示框文字颜色
 "fontColorHI": "#222",  //提示框高亮选择时文字颜色
 "fontSize": "16px",  //文字大小
 "fontFamily": "微软雅黑", //文字字体
 "borderColor": "#d8d8d8", //提示框的边框颜色
 "bgcolorHI": "#e8e8e8",  //提示框高亮选择的颜色
 "sugSubmit": true,  //在选择提示词条是是否提交表单 
 };
 BaiduSuggestion.bind("ipt1",params,show); 
</script> 
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
js中的this关键字详解
Sep 25 Javascript
web css实现整站样式互相切换
Oct 29 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 Javascript
微信小程序页面生命周期详解
Jan 31 Javascript
vue父组件向子组件传递多个数据的实例
Mar 01 Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
JavaScript undefined及null区别实例解析
Jul 21 Javascript
jQuery.Form上传文件操作
Feb 05 #Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 #Javascript
用jquery的attr方法实现图片切换效果
Feb 05 #Javascript
JavaScript编写九九乘法表(两种任选)
Feb 04 #Javascript
JS动态生成年份和月份实例代码
Feb 04 #Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 #Javascript
js常用DOM方法详解
Feb 04 #Javascript
You might like
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
浅谈Eclipse PDT调试PHP程序
2014/06/09 PHP
php中创建和调用webservice接口示例
2014/07/25 PHP
php判断表是否存在的方法
2015/06/18 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
2016/03/17 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
Firefox div高度自适应
2009/04/28 Javascript
js null,undefined,字符串小结
2010/08/21 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
javascript cookie的简单应用
2016/02/24 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
2018/08/06 Javascript
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
Python实例之wxpython中Frame使用方法
2014/06/09 Python
python每隔N秒运行指定函数的方法
2015/03/16 Python
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
python实现PID算法及测试的例子
2019/08/08 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
解决virtualenv -p python3 venv报错的问题
2021/02/05 Python
Html5 localStorage入门教程
2018/04/26 HTML / CSS
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
股东出资协议书
2016/03/21 职场文书
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android