站长工具|百度搜索框提示功能

百度向站长开放免费“百度搜索框”代码和“百度搜索框提示”代码。只需进行简单的设置, 即可将“ 百度搜索框( 带提示功能)”功能快速加入到您的网页中。提升用户在网站中的搜索体验。

根据不同类型的网站需求,站长工具一共提供三种引入方式供您选择:

简单方式——方便的将“百度搜索框(带提示功能)”直接加入到您的网页中。将以下代码加入到您的网页中,即可获得带有“搜索框提示”功能的百度搜索框

HTML代码:

<form action=”http://www.baidu.com/baidu” target=”_blank”>
    <table bgcolor=”#FFFFFF”><tr><td>
        <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 type=”text”  name=”word” size=”30″ baiduSug=”1″>
        <input type=”submit”  value=”百度搜索”>
    </td></tr></table>
</form>

Javascript代码:

<script charset=”gbk” src=”http://www.baidu.com/js/opensug.js”></script>

提示:Javascript代码请添加到网页中</body>标签的后面 如使用utf-8编码,则需要在HTML代码中加入<input name=”ie” type=”hidden” value=”utf-8″>, 同时务必在script标签中设置charset=gbk属性,否则搜索关键词和提示词会出现乱码。

查看样例效果

添加方式——快速的为页面中已有的“百度搜索框”或其他文本输入框添加“百度搜索框提示”功能。

第一步

为需要添加“百度搜索框提示”功能的<input>标签添加baiduSug属性。例如:

<input type=”text” name=”word” baiduSug=”1|2″>

当设置baiduSug=1时,用户选中sug词条时默认执行表单提交动作;

当设置baiduSug=2时,用户选中sug词条时不执行表单提交动作。

第二步

在网页中引入Javascript文件:

<script charset=”gbk” src=”http://www.baidu.com/js/opensug.js”></script>

提示:如果网页中有多个输入框需要添加“百度搜索框提示”功能,请为每个输入框都加上baiduSug属性。Javascript代码请添加到网页中</body>标签的后面。如使用utf-8编码,请务必在script标签中设置charset=gbk属性,否则搜索提示词会出现乱码。

查看样例效果

高级方式——提供“百度搜索框提示”API,打造您的个性化搜索框提示功能!

第一步

在网页中引入Javascript文件:

<script charset=”gbk” src=”http://www.baidu.com/js/opensug.js”></script>

第二步

在Javascript程序中调用BaiduSuggestion.bind()方法将“百度搜索框提示”功能和页面上的元素 进行绑定。

BaiduSuggestion.bind()的具体形式为:

BaiduSuggestion.bind(inputObj|inputId,[params],[confirmCallback]); inputObj|inputId:

为需要绑定搜索框提示功能的input对象或input对象的id。

params:

绑定搜索框提示功能时用到的参数,必须以Json形式给出,例如:

{
"XOffset":0, //提示框位置横向偏移量,单位px
"YOffset":0, //提示框位置纵向偏移量,单位px
"width":350, //提示框宽度,单位px
"fontColor":"#03c", //提示框文字颜色
"fontColorHI":"#FFF", //提示框高亮选择时文字颜色
"fontSize":"12px", //文字大小
"fontFamily":"宋体", //文字字体
"borderColor":"#03c", //提示框的边框颜色
"bgcolorHI":"#fd0", //提示框高亮选择的颜色
"sugSubmit":false //选中提示框中词条时是否提交表单
}

confirmCallback(txt):

当用户选择提示中具体选项时的回调函数,txt为用户选择的内容。

提示:如果网页中有多个输入框需要添加“百度搜索框提示”功能,请为每个输入框都加上baiduSug属性。Javascript代码请添加到网页中</body>标签的后面。如使用utf-8编码,请务必在script标签中设置charset=gbk属性,否则搜索提示词会出现乱码。

时间: 2024-08-05 15:19:38

站长工具|百度搜索框提示功能的相关文章

“百度搜索框提示”代码

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

百度搜索框提示

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

原生AJAX+jsp+servlet实现百度搜索框提示效果

我们这里使用HTML5的新特性datalist实现输入框的自动下拉提示,用datalist通过id与input关联起来,在搜索时就会出现下拉框.下面是HTML代码. <!-- 输入框 --> <input type="text" size="50" id="search" name="search" list="browser" onkeyup="search()" o

js借助JSONP实现百度搜索框提示效果

主要借助百度搜索的API,调用时会存在跨域问题,需要通过JSONP来解决这个问题,代码如下(代码中部分使用ES6语法): HTML <input type="text" id="input"> <div id="text"></div> js: document.querySelector('#input').oninput = function () { let val = this.value; jsonp

jQuery实现TEXT文本框输入时的提示信息(谷歌百度淘宝搜索框提示实现)

在搜索框中,输入之前框内有输入的提示信息,文本框获得焦点后会自动消失的效果,效果图如下: 鼠标放在文本框时的效果: 创建工具类(已经存在就不用创建了)Util.js(DWR的JS) 在里面添加如下方法: Js代码 /** * Input框里的灰色提示,使用前先引入jquery * <br>使用方法:<input type="text" tipMsg="您的用户名"   /> * * @return */ function inputTipTe

上课笔记_使用DWR实现自动补全 类似百度搜索框的自动显示效果

使用DWR实现自动补全 自动补全:是指用户在文本框中输入前几个字母或汉字的时候,自动在存放数据的文件或数据库中将所有以这些字母或汉字开头的数据提示给用户供用户选择 在日常上网过程中,我们经常使用搜索引擎,当我们输入想要检索的关键字时,搜索引擎会提示我们相关的关键字 训练要点: 掌握使用DWR框架开发Ajax程序 使用MyEclipse 10.0 + MySql5.0 新建数据库:可以手动随便新建一个测试用的 DROP TABLE IF EXISTS `books`; CREATE TABLE `

Android搜索自动提示功能 AutocompleteTextView

1.配置main.xml中自动提示控件: <AutoCompleteTextView android:id="@+id/autotv_searchresult" android:layout_width="280dip" android:layout_height="35dip" android:layout_centerInParent="true" android:background="#00000000

模拟百度搜索框,输入时显示历史记录

今天写了个小demo,利用本地存储的特点,模拟百度搜索框. 主要知识是利用本地存储的特点,模拟百度搜索时的历史记录显示. 主要HTML代码为 <div class="search"> <input type="text"/> <button class="btn">搜索</button> </div> <ul class="hidden"> <li&

模拟百度搜索框

在使用百度搜索是,页面会根据我们输入的内容自动匹配一些候选内容. 实现的主要过程主要是: 1.用户在输入一个字符结束后,在onkeyup事件中获取用户输入的内容. 2.根据获取到的内容向服务器发送请求,匹配到相似的数据,存到数组中. 3.判断数组是否有内容,如果有数据,就在搜索框下面遍历匹配到的内容(候选项). 首先,要写好页面布局 html部分 <html> <head> <meta http-equiv="Content-Type" content=&