百度搜索代码、百度搜索引擎代码、百度搜索框代码
百度搜索引擎代码
您可以根据以下多种百度搜索代码，选择相应的代码放在您网站的显著位置上，使您的网站立即拥有一个强大的百度搜索功能！
百度网页搜索代码
将以下代码粘贴到您希望放置的网页中：
多类型百度搜索代码
将以下代码粘贴到您希望放置的网页中：
指定站点搜索代码
将以下代码粘贴到您希望放置的网页中：
提示：如果网页采用utf-8代码，则需要在代码中加入 &input name=ie type=hidden value=utf-8&
，否则搜索关键词会出现乱码。
将以下代码粘贴到您希望放置的网页中：
百度搜索框提示免费代码
将以下代码加入到您的网页中，即可获得带有“搜索框提示”功能的百度搜索框。
HTML代码：
Javascript代码：
Javascript代码请添加到网页中&/body&标签的后面 如使用utf-8编码，则需要在HTML代码中加入&input name=&ie&
type=&hidden& value=&utf-8&&， 同时务必在script标签中设置charset=gbk属性，否则搜索关键词和提示词会出现乱码。
Copyright &
All Rights Reserved上传时间：
百度搜索下拉框代码【 】
56官方微信
扫一扫发现精彩如何用html代码写一个搜索框啊，就像百度一样的给我大概写一下呗_百度知道让input框实现类似百度的搜索提示(基于jquery事件监听)
字体：[ ] 类型：转载 时间：
让input框实现类似百度的搜索提示，oninput和onpropertychange事件监听，通过ajax获取json数据
挺炫的一个效果，百度和谷歌好像已实现好多年了，我以为在网上能轻易找到代码来实现这个效果。真正遇到这个需求，发现还真找不到。于是自己动手写这个效果，由于我是把效果整合到我的整套框架里，所以没有进行单独的封装。
需求：实现带提示的input框，类似百度搜索，有改动的时候去获取常用关键词，数据来源于系统数据库，支持鼠标选择或键盘选择
思路：框架一贯思路，通过class作为监听入口，通过data作为数据传递；通过监听input和propertychange事件实现实时的改动监听，input是主流，propertychange是ie，你懂的；通过ajax实现post动作，把返回内容显示成类似选框的形式；监听键盘的上键（38）、下键（40）、回车键（13），通过绑定keydown，判断event.keycode实现；监听鼠标的mouseover和click事件，与键盘动作要完美结合；若input内容要求与已知选项必须一致，则监听blur事件，判断是否允许换焦点；
实现代码：
代码如下://By COoL //定义全局变量用于储存提示层
//监听改动或得到焦点事件 //禁用chrome和firefox浏览器自带的自动提示 $('.getsearchjson').attr("autocomplete","off"); $('.getsearchjson').bind("propertychange input focus",function(event){ &&& $this=$(this); &&& if(event.type!='focus'){ &&&&&&& //如果有改变，则状态定为必须重新选择，因为纯人手输入会导致value无法插入 &&&&&&& $this.data('ok',false); &&& } &&& //获取input框位置并计算提示层应出现的位置 &&& var top=1*$this.offset().top+25; &&& var left=1*$this.offset(). &&& var width=1*$this.width()+12; &&& //重建储存提示层并让其在适当位置显示 &&& $(liketips).remove(); &&& liketips=document.createElement('div'); &&& $liketips=$(liketips); &&& //class样式这里不提供，最主要是position:absolute &&& $liketips.addClass("liketips"); &&& $liketips.css({top:top+'px',left:left+'px',width:width+'px'}); &&& //加载前先显示loading动态图 &&& $liketips.append('&img src="/images/loading.gif" border="0" /&'); &&& $liketips.appendTo($this.parent()); &&& $liketips.show(); &&& //定义ajax去获取json，type参数通过data-type设置，keyword则是目前已输入的值 &&& //返回值以table形式展示 &&& $.post('/data/search.do',{type:$this.data('type'),keyword:$this.val()},function(json){ &&&&&&& $liketips.empty(); &&&&&&& var htmlcode="&table cellspacing='0' cellpadding='2'&&tbody&"; &&&&&&& for(var i=0;i&json.datas.i++){ &&&&&&&&&&& //这里我需要用到value和title两项，所以用data-value传递多一个参数，在回车或鼠标点击后赋值到相应的地方，以此完美地替代select &&&&&&&&&&& htmlcode+='&tr data-value="'+json.datas[i][0]+'"&&td&'+json.datas[i][1]+'&/td&&/tr&'; &&&&&&& } &&&&&&& htmlcode+="&/tbody&&/table&&span&请务必在此下拉框中选择&/span&"; &&&&&&& //把loading动态图替换成内容 &&&&&&& $liketips.html(htmlcode); &&& },"json"); }); //焦点消失时确保数据来自选项，隐藏提示框体 $('.getsearchjson').blur(function(){ &&& //因为鼠标点击时blur动作结算在click之前，setTimeout是为了解决这个问题 &&& $oldthis=$(this); &&& setTimeout(function(){ &&&&&&& if($oldthis.data('ok')) &&&&&&&&&&& $(liketips).fadeOut('fast'); &&&&&&& else{ &&&&&&&&&&& alert('为保证数据准确性，请务必在下拉提示中选择一项，谢谢合作'); &&&&&&&&&&& $oldthis.focus(); &&&&&&& } &&& },200); }); //监听键盘动作 $('.getsearchjson').keydown(function(event){ &&& //console.log(event.keyCode); &&& $this=$(this); &&& if(event.keyCode==40){ &&&&&&& //按键是向下 &&&&&&& $nowtr=$('tr.selectedtr'); &&&&&&& //如果已存在选中，则向下，否则，选中选单中第一个 &&&&&&& if($nowtr.length&0){ &&&&&&&&&&& $nexttr=$nowtr.next('tr') &&&&&&&&&&& //如果不是最后选项，向下个tr移动，否则跳到第一个tr &&&&&&&&&&& if($nexttr.length&0){ &&&&&&&&&&&&&&& $('tr.selectedtr').removeClass(); &&&&&&&&&&&&&&& $nexttr.addClass('selectedtr'); &&&&&&&&&&& } &&&&&&&&&&& else{ &&&&&&&&&&&&&&& $('tr.selectedtr').removeClass(); &&&&&&&&&&&&&&& $nowtr.parent().find('tr:first').addClass('selectedtr'); &&&&&&&&&&& } &&&&&&& } &&&&&&& else{ &&&&&&&&&&& $('.liketips').find('tr:first').addClass('selectedtr'); &&&&&&& } &&& } &&& else if(event.keyCode==38){ &&&&&&& //按键是向上 &&&&&&& $nowtr=$('tr.selectedtr'); &&&&&&& //如果已存在选中，则向下，否则，选中选单中第一个 &&&&&&& if($nowtr.length&0){ &&&&&&&&&&& $prevtr=$nowtr.prev('tr') &&&&&&&&&&& //如果不是最后选项，向下个tr移动，否则跳到第一个tr &&&&&&&&&&& if($prevtr.length&0){ &&&&&&&&&&&&&&& $('tr.selectedtr').removeClass(); &&&&&&&&&&&&&&& $prevtr.addClass('selectedtr'); &&&&&&&&&&& } &&&&&&&&&&& else{ &&&&&&&&&&&&&&& $('tr.selectedtr').removeClass(); &&&&&&&&&&&&&&& $nowtr.parent().find('tr:last').addClass('selectedtr'); &&&&&&&&&&& } &&&&&&& } &&&&&&& else{ &&&&&&&&&&& $('.liketips').find('tr:last').addClass('selectedtr'); &&&&&&& } &&& } &&& else if(event.keyCode==13){ &&&&&&& //按键是回车，则确定返回并隐藏选框 &&&&&&& $nowtr=$('tr.selectedtr'); &&&&&&& if($nowtr.length==1){ &&&&&&&&&&& //设置value值到input框通过参数data-valueto配置的value值存储项中去，一般是hidden项 &&&&&&&&&&& $valuefield=$('input[name='+$this.data('valueto')+']'); &&&&&&&&&&& $valuefield.val($nowtr.data('value')); &&&&&&&&&&& $this.val($nowtr.text()); &&&&&&&&&&& //设置状态是从选项中选择，允许blur &&&&&&&&&&& $this.data('ok',true); &&&&&&& } &&&&&&& $(liketips).fadeOut('fast'); &&&&&&& &&& } &&& //console.log(event.keyCode); &&& }); //监听鼠标动作，mouseover改变选中项 $(document).delegate('.liketips td','mouseover',function(){ &&& $nowtr=$(this).parent(); &&& $nowtr.siblings('tr').removeClass(); &&& $nowtr.addClass('selectedtr'); }); //监听鼠标动作，click选定 $(document).delegate('.liketips td','click',function(){ &&& $nowtr=$(this).parent(); &&& if($nowtr.length==1){ &&&&&&& //取得该提示层对应的input框 &&&&&&& $inputfield=$nowtr.parent().parent().parent().siblings('input.getsearchjson'); &&&&&&& //设置value值到input框通过参数data-valueto配置的value值存储项中去，一般是hidden项 &&&&&&& $valuefield=$('input[name='+$inputfield.data('valueto')+']'); &&&&&&& $valuefield.val($nowtr.data('value')); &&&&&&& $inputfield.val($nowtr.text()); &&&&&&& //设置状态是从选项中选择，允许blur &&&&&&& $inputfield.data('ok',true); &&& } &&& $(liketips).fadeOut('fast'); });
CSS这里就不放出了，我的实现效果如下： 代码如下: //禁用chrome和firefox浏览器自带的自动提示 $this.attr("autocomplete","off");
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具