百度搜索提示框

<!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": "#999", //提示框的边框颜色
"bgcolorHI": "#e8e8e8", //提示框高亮选择的颜色
"sugSubmit": true, //在选择提示词条是是否提交表单
};
BaiduSuggestion.bind("ipt1",params,show);
</script>
</body>
</html>

时间: 2024-10-23 09:32:01

百度搜索提示框的相关文章

仿百度搜索提示框效果

<!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: 5

百度地图信息提示框的修改 转

http://blog.csdn.net/jankercsdn/article/details/45392635 版权声明:本文为博主原创文章,未经博主允许不得转载. 一个小项目,百度地图的定制,电脑用的是触摸屏,支持手写输入,中文输入直接调用系统的虚拟键盘,手写输入是参考网上高手写的一个控件. 百度的信息提示框里的搜索框里要输入查询地址,就是去哪里,到哪里那个地址输入框,要解决的问题是怎么把虚拟输入键盘的内容赋值到这个地址输入框,并要判断当前是哪个输入框. 一般运用信息提示框是调用这个库“ht

Android AutoCompleteTextView控件实现类似百度搜索提示,限制输入数字长度

Android AutoCompleteTextView 控件实现类似被搜索提示,效果如下 1.首先贴出布局代码 activity_main.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="f

如何实现类似百度搜索提示的效果

用PHP+Mysql的方式来举个例子: 一.进行拼音转换 首先要建立一个关键词库.这库具体内容就是自己找了,然后导入到一个表里. 然后用程序将表里的关键词首字母.全拼转换成拼音后一一对应到表里存储. 拼音转换可以参考我另一个篇文章: 二.对比查询 在输出查询页面前,将库中关键词的内容按拼音索引并排序(mysql有按拼音排序功能,如果是utf8的字段用 ORDER BY CONVERT( your_sort_field USING gbk ) ;)读到变量里,按拼音顺序排序好.然后在页面搜索框输入

Android--多选自动搜索提示

一. 效果图 常见效果,在搜素提示选中之后可以继续搜索添加,选中的词条用特殊字符分开 二. 布局代码 <MultiAutoCompleteTextView android:id="@+id/autoMulti" android:layout_width="match_parent" android:layout_height="60dp" android:layout_marginTop="50dp" /> 三.

百度搜索下拉框提示代码 opensug.js

opensug ·简单方式--方便的将"百度搜索框(带提示功能)"直接加入到您的网页中. 将以下代码加入到您的网页中,即可获得带有"搜索框提示"功能的百度搜索框. HTML代码: <form action="http://www.baidu.com/baidu" target="_blank"> <table bgcolor="#FFFFFF"><tr><td>

浅谈asp.net通过本机cookie仿百度(google)实现搜索input框自动弹出搜索提示

对于通过用户输入关键词实现自动弹出相关搜索结果,这里本人给两种解决方案,用于两种不同的情形. 常见方法是在数据库里建一个用户搜索关系表,然后通过用户搜索框输入的关键字异步调用数据表中的相关数据,显示在一个隐藏div中. 第二种方式也就是我现在着重讨论的方式,适用于单个用户,基于此用户以往的搜索数据来实现搜索提示功能.技术关键是记录下用户的以往搜索数据,写入cookie,然后页面从用户本机cookie调用数据. ok,下面进入正题.本文主要讲实现步骤,代码可根据自己实际需要更改. 一,如何写入co

小练习:用jQuery简单模拟百度搜索框的提示功能

今天第一次接触jQuery,用jQuery模拟了一下百度搜索的自动提示功能.连带jQuery的基本知识点,简单总结如下: 首先得在工程中导入插件:jquery-1.4.2.js ,并在html的head中引入该js: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html>

“百度搜索框提示”代码

使用方法: 百度提供了2种自定义调用的方法方法一: 第一步为需要添加“百度搜索框提示”功能的<input>标签添加baiduSug属性.例如:<input type=”text” name=”word” baiduSug=”1|2″>当设置baiduSug=1时,用户选中sug词条时默认执行表单提交动作:当设置baiduSug=2时,用户选中sug词条时不执行表单提交动作.       第二步      在网页中引入Javascript文件: <script charset=