精华内容
下载资源
问答
  • 百度搜索框html代码

    2014-09-06 12:02:19
    百度搜索框html代码,一个很好的搜索框实例
  • 本篇文章主要介绍了使用 Vue.js 仿百度搜索框的实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 实现百度搜索栏代码

    千次阅读 2014-02-14 10:18:50
    实现百度搜索栏代码 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">        搜索词自动完成    #search{  text-align: center;  position:relative;  }  .autocomplete{  border: ...
     实现百度搜索栏代码
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>搜索词自动完成</title> 
    <style type="text/css"> 
    #search{ 
    text-align: center; 
    position:relative; 

    .autocomplete{ 
    border: 1px solid #9ACCFB; 
    background-color: white; 
    text-align: left; 

    .autocomplete li{ 
    list-style-type: none; 

    .clickable { 
    cursor: default; 

    .highlight { 
    background-color: #9ACCFB; 

    </style> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 
    $(function(){ 
    //取得div层 
    var $search = $('#search'); 
    //取得输入框JQuery对象 
    var $searchInput = $search.find('#search-text'); 
    //关闭浏览器提供给输入框的自动完成 
    $searchInput.attr('autocomplete','off'); 
    //创建自动完成的下拉列表,用于显示服务器返回的数据,插入在搜索按钮的后面,等显示的时候再调整位置 
    var $autocomplete = $('<div class="autocomplete"></div>') 
    .hide() 
    .insertAfter('#submit'); 
    //清空下拉列表的内容并且隐藏下拉列表区 
    var clear = function(){ 
    $autocomplete.empty().hide(); 
    }; 
    //注册事件,当输入框失去焦点的时候清空下拉列表并隐藏 
    $searchInput.blur(function(){ 
    setTimeout(clear,500); 
    }); 
    //下拉列表中高亮的项目的索引,当显示下拉列表项的时候,移动鼠标或者键盘的上下键就会移动高亮的项目,想百度搜索那样 
    var selectedItem = null; 
    //timeout的ID 
    var timeoutid = null; 
    //设置下拉项的高亮背景 
    var setSelectedItem = function(item){ 
    //更新索引变量 
    selectedItem = item ; 
    //按上下键是循环显示的,小于0就置成最大的值,大于最大值就置成0 
    if(selectedItem < 0){ 
    selectedItem = $autocomplete.find('li').length - 1; 

    else if(selectedItem > $autocomplete.find('li').length-1 ) { 
    selectedItem = 0; 

    //首先移除其他列表项的高亮背景,然后再高亮当前索引的背景 
    $autocomplete.find('li').removeClass('highlight') 
    .eq(selectedItem).addClass('highlight'); 
    }; 
    var ajax_request = function(){ 
    //ajax服务端通信 
    $.ajax({ 
    'url':'/test/index.jsp', //服务器的地址 
    'data':{'search-text':$searchInput.val()}, //参数 
    'dataType':'json', //返回数据类型 
    'type':'POST', //请求类型 
    'success':function(data){ 
    if(data.length) { 
    //遍历data,添加到自动完成区 
    $.each(data, function(index,term) { 
    //创建li标签,添加到下拉列表中 
    $('<li></li>').text(term).appendTo($autocomplete) 
    .addClass('clickable') 
    .hover(function(){ 
    //下拉列表每一项的事件,鼠标移进去的操作 
    $(this).siblings().removeClass('highlight'); 
    $(this).addClass('highlight'); 
    selectedItem = index; 
    },function(){ 
    //下拉列表每一项的事件,鼠标离开的操作 
    $(this).removeClass('highlight'); 
    //当鼠标离开时索引置-1,当作标记 
    selectedItem = -1; 
    }) 
    .click(function(){ 
    //鼠标单击下拉列表的这一项的话,就将这一项的值添加到输入框中 
    $searchInput.val(term); 
    //清空并隐藏下拉列表 
    $autocomplete.empty().hide(); 
    }); 
    });//事件注册完毕 
    //设置下拉列表的位置,然后显示下拉列表 
    var ypos = $searchInput.position().top; 
    var xpos = $searchInput.position().left; 
    $autocomplete.css('width',$searchInput.css('width')); 
    $autocomplete.css({'position':'relative','left':xpos + "px",'top':ypos +"px"}); 
    setSelectedItem(0); 
    //显示下拉列表 
    $autocomplete.show(); 


    }); 
    }; 
    //对输入框进行事件注册 
    $searchInput 
    .keyup(function(event) { 
    //字母数字,退格,空格 
    if(event.keyCode > 40 || event.keyCode == 8 || event.keyCode ==32) { 
    //首先删除下拉列表中的信息 
    $autocomplete.empty().hide(); 
    clearTimeout(timeoutid); 
    timeoutid = setTimeout(ajax_request,100); 

    else if(event.keyCode == 38){ 
    //上 
    //selectedItem = -1 代表鼠标离开 
    if(selectedItem == -1){ 
    setSelectedItem($autocomplete.find('li').length-1); 

    else { 
    //索引减1 
    setSelectedItem(selectedItem - 1); 

    event.preventDefault(); 

    else if(event.keyCode == 40) { 
    //下 
    //selectedItem = -1 代表鼠标离开 
    if(selectedItem == -1){ 
    setSelectedItem(0); 

    else { 
    //索引加1 
    setSelectedItem(selectedItem + 1); 

    event.preventDefault(); 

    }) 
    .keypress(function(event){ 
    //enter键 
    if(event.keyCode == 13) { 
    //列表为空或者鼠标离开导致当前没有索引值 
    if($autocomplete.find('li').length == 0 || selectedItem == -1) { 
    return; 

    $searchInput.val($autocomplete.find('li').eq(selectedItem).text()); 
    $autocomplete.empty().hide(); 
    event.preventDefault(); 

    }) 
    .keydown(function(event){ 
    //esc键 
    if(event.keyCode == 27 ) { 
    $autocomplete.empty().hide(); 
    event.preventDefault(); 

    }); 
    //注册窗口大小改变的事件,重新调整下拉列表的位置 
    $(window).resize(function() { 
    var ypos = $searchInput.position().top; 
    var xpos = $searchInput.position().left; 
    $autocomplete.css('width',$searchInput.css('width')); 
    $autocomplete.css({'position':'relative','left':xpos + "px",'top':ypos +"px"}); 
    }); 
    }); 
    </script> 
    </head> 
    <body> 
    <div id = "search"> 
    <label for="search-text">请输入关键词</label><input type="text" id="search-text" name="search-text" /> 
    <input type="button" id="submit" value="搜索"/> 
    </div> 
    </body> 
    </html> 
    展开全文
  • 仿百度搜索框源码

    2015-01-17 09:04:48
    仿百度搜索框源码
  • <!... <... <head> ...meta charset="utf-8" />...仿百度搜索框的联想词提示效果js代码<... 这是一款纯javaScript实现的仿百度搜索框联想词提示代码,搜索框输入文字自动提示相关联想词js特效。
  • 以下,小编为大家介绍一种用小段html代码就能将百度搜索栏包含到你的页面里的方法。
  • 代码如下: <script> function butClick() { var val = document.getElementById("search_key").value; if(val.length === 0){ alert('搜索为空,请输入内容'); return false; }e.

    参考网站:https://110.nanshiw.com/

     

    上图为实现效果

    代码如下:

    <script>
    function butClick() {
        var val = document.getElementById("search_key").value;
            if(val.length === 0){
                    alert('搜索为空,请输入内容');
                    return false;
            }else{
                    var open_url = "https://www.baidu.com/s?ie=utf-8&wd=" + val;
                    window.open(open_url); 
            }
    }
    document.onkeydown = function (e) {
        var theEvent = window.event || e;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code == 13) {
            butClick();
        }
    }
    </script>
    <div class="layui-clear"> 
    <a href="" class="baidulogo" target="_blank"> <img src="/www_moban_kim-images/bd_logo.png"></a>
    <input type="search" id="search_key">
    <a class="btn" target="_blank"  href="javascript:void(0)" onclick="butClick();">百度一下</a> </div>

     

    上面代码简单解释一下,其中下面代码

    <script>
    function butClick() {
        var val = document.getElementById("search_key").value;
            if(val.length === 0){
                    alert('搜索为空,请输入内容');
                    return false;
            }else{
                    var open_url = "https://www.baidu.com/s?ie=utf-8&wd=" + val;
                    window.open(open_url); 
            }
    }
    document.onkeydown = function (e) {
        var theEvent = window.event || e;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code == 13) {
            butClick();
        }
    }
    </script>
    

    js获取到表单的数据,把获取到的,数据和百度搜索URL拼接,然后直接跳转到百度

    <div class="layui-clear"> 
    <a href="" class="baidulogo" target="_blank"> <img src="/www_moban_kim-images/bd_logo.png"></a>
    <input type="search" id="search_key">
    <a class="btn" target="_blank"  href="javascript:void(0)" onclick="butClick();">百度一下</a> </div>
    

    上面这段是样式,也就是开头最终实现的样子

    这段代码中javascript:void(0)" οnclick="butClick(); 这个是不能变更的,如果你是大神,变更成什么样子,你可以自己来,我不是大神,建议不要更改

     

    下面的代码是直接搜索,不跳转到新页面的

    <script>
    function butClick() {
        var val = document.getElementById("search_key").value;
            if(val == "" || val == null || val == 'undefined'){
                    alert('搜索为空,请输入内容');
                    return false;
            }else{
               window.location.href = "https://www.baidu.com/s?ie=utf-8&wd=" + val;
            }
    }
    document.onkeydown = function (e) {
        var theEvent = window.event || e;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code == 13) {
            butClick();
        }
    }
    </script>
    <div class="layui-clear"> 
    <a href="" class="baidulogo" target="_blank"> 
    <img src="/www_moban_kim-images/bd_logo.png"></a>
    <input type="search" id="search_key">
    <a class="btn" target="_blank"  href="javascript:void(0)" onclick="butClick();">百度一下</a> 
    </div>
    

    这个代码感谢大神:4414站长论坛:小千 ,个人主页https://www.4414.cn/home.php?mod=space&uid=10367,的无私解决问题,感谢感谢!

    展开全文
  • Dreamweaver怎么制作百度搜索栏静态页面?Dreamweaver中想要设计百度的搜索页面,该怎么设计呢?今天我们就来看看使用dw代码设计百度搜索栏静态页面的教程,需要的朋友可以参考下
  • jQuery百度搜索框下拉代码,鼠标点击搜索框弹出搜索记录,可切换百度、搜狗、必应、谷歌等搜索引擎。
  • JS百度搜索框联想词提示代码是一款纯javaScript仿百度搜索框联想词提示代码
  • 最近项目中用到类似百度的输入框,于是自己用jquery写了一个。希望和大家共同分享一下。存在许多bug,请各位不吝赐教。
  • 里面包含了21中不同版式的百度搜索框免费源代码
  • 主要介绍了jQuery搜索框效果实现代码百度关键词联想,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • [HTML] 百度搜索框的基本实现 源码

    万次阅读 2019-03-16 01:19:37
    在搭建个人网站过程中,我们可能想要在页面加入搜索栏以增加网页实用性,本文主要介绍如何在页面加入百度搜索引擎。

    百度搜索框 源码

    在搭建个人网站过程中,我们可能想要在页面加入搜索栏以增加网页实用性,本文主要介绍如何在页面加入百度搜索引擎。
    在这里插入图片描述
    首先给一段基础源码:

    <html>
    <head>
        <title>百度搜索框</title>
    </head>
    <body>
    <form id="bdfm" target="_blank" name="bdfm" method="get" action="http://www.baidu.com/s">
        <table>
           <tr>
                <td>
                     <a href="http://www.baidu.com">
                             <img src="img/baidu.jpg"/>  #请自行下载图片
                     </a>
                </td>
                <td><br/><input type="text" id="search1" name="word"/></td>
                <td><br/><input type="submit" value="搜索" /></td>
             </tr>
        </table>
    </form>
    </body>
    <html>
    

    其次就是将代码运用到具体网页中去:

     <div class="media-body">
       <form id="bdfm" target="_blank" name="bdfm" method="get" action="http://www.baidu.com/s">
         <input type="text" class="main-search" id="search1" name="word"/>             
       </form>
     </div>
    
    展开全文
  • 百度搜索框推荐提示功能代码,百度搜索提示框,百度搜索提示功能代码,直接调用的百度搜索引擎官方数据。
  • jQuery仿百度搜索框下拉代码是一款点击搜索框默认弹出下拉热门关键词列表,进行快捷搜索效果。
  • jQuery百度搜索提示效果代码,在输入框输入时,会根据输入的内容模糊查询相关的做成下拉框显示在下面,jQuery百度搜索提示效果代码,在输入框输入时,会根据输入的内容模糊查询相关的做成下拉框显示在下面
  • 百度代码搜索框

    2012-08-05 20:43:09
    百度代码搜索框,就像hao123一样,输入内容的时候会自动补全
  • 仿百度首页搜索引擎html代码...仿百度搜索框代码【超炫】仿百度搜索引擎首页html代码静态 网址导航源码 效果演示:http://bdwww.i6wz.cn/ 仿百度首页搜索html模板 仿百度首页关键词内容列表信息展示,包括html,css文件
  • 主要为大家详细介绍了JS实现百度搜索框关键字推荐,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 百度搜索框提示”代码

    千次阅读 2016-05-13 14:43:22
    百度提供了2种自定义调用的方法

    转自:http://zzagain.blog.163.com/blog/static/16930562820125595854708/

    使用方法:
           百度提供了2种自定义调用的方法
    方法一:

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


    <input type="text" name="word" baiduSug="1|2">
    当设置baiduSug=1时,用户选中sug词条时默认执行表单提交动作;
    当设置baiduSug=2时,用户选中sug词条时不执行表单提交动作。


           第二步,

    在页面底部加入js文件:


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

          经Gonten测试,使用该方法非常简单,而且使用方便,提示下拉框可以根据输入框宽度自动调整。

      看效果:http://www.baidu.com/search/sug/demo1.html

    实例代码如下:

    <!DOCTYPE html>
    <!--STATUS OK-->
    <html><head>
    <meta http-equiv="X-UA-Compatible" content="IE=7">
    <meta http-equiv="content-type" content="text/html;charset=gb2312">
    <title>百度搜索帮助中心-免费代码</title>
    <style>
    p{font-size:13px;line-height:2}
    </style>
    </head>
    <body>
    
    <!-- 页面中的输入框  -->
    <p>
    您的输入框: <input type="text" size="40" baiduSug="2">
    </p>
    </body>
    <!-- 百度搜索框提示 -->
    <script charset="gbk" src="http://www.baidu.com/js/opensug.js"></script>
    </html>
    

    方法二:

         第一步,

    在网页底部引入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。


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

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


    confirmCallback(txt):

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



    提示:
    Javascript代码请添加到网页中</body>标签的后面。
    Javascript文件的应在BaiduSuggestion.bind()方法被调用之前引入。
    查看样例效果

          实例代码如下:

    <!DOCTYPE html>
    <!--STATUS OK-->
    <html><head>
    <meta http-equiv="X-UA-Compatible" content="IE=7">
    <meta http-equiv="content-type" content="text/html;charset=gb2312">
    <title>百度搜索帮助中心-免费代码</title>
    <style>
    p{font-size:13px;line-height:2}
    </style>
    </head>
    <body>
    
    <!-- 准备通过程序动态添加提示功能的input  -->
    <p>
    您的输入框:<input id="ipt1" type="text" style="width:200px;padding:1px;border:1px solid gray">
    
    当前选择文字:<span id="alertSpan" style="font-weight:bold"></span>
    </p>
    </body>
    
    <!-- 百度搜索框提示 -->
    <script charset="gbk" src="http://www.baidu.com/js/opensug.js"></script>
    
    <!-- 程序示例  -->
    	
    <script type="text/javascript">
     	var txtObj = document.getElementById("alertSpan");
    
    	//回调函数,用于获取用户当前选择的文字
     	function show(str){
    		txtObj.innerHTML = str;
    	}
    
    	var params = {
    	"XOffset":0, //提示框位置横向偏移量,单位px
    	"YOffset":0, //提示框位置纵向偏移量,单位px
    	"width":204, //提示框宽度,单位px
    	"fontColor":"#f70", //提示框文字颜色
    	"fontColorHI":"#FFF",	//提示框高亮选择时文字颜色
    	"fontSize":"12px",		//文字大小
    	"fontFamily":"宋体",	//文字字体
    	"borderColor":"gray", 	//提示框的边框颜色
    	"bgcolorHI":"#03c",		//提示框高亮选择的颜色
    	"sugSubmit":false		//在选择提示词条是是否提交表单
    	};
    
     	BaiduSuggestion.bind("ipt1",params,show);
    	
    </script>
    </html>
    


    实例代码如下:


          一般情况下使用第一种方法就够了,使用比较方便,如果你会使用第二种也不错。第一种方法可以方便的屏蔽掉在搜索提示的右下角是有“百度搜索框提示”的文字,就是在输入框上面添加:


    <style>
    .bdsug_copy{
    display: none;
    }
    </style>



    就可以了,也可以添加到<head>里。

    但第二种方法如此做无效。

    展开全文
  • HTML百度搜索框实现(附源码带注释)

    万次阅读 多人点赞 2019-05-11 21:55:44
    1.百度类效果 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met....
  • 百度搜索栏包含到你的页面来:&lt;html&gt; &lt;head&gt; &lt;title&gt;包含百度页面&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form id="bdfm&...
  • 百度搜索框代码(有下拉提示的)

    千次阅读 2012-10-25 21:24:16
    将以下代码加入到您的网页中,即可获得带有“搜索框提示”功能的百度搜索框。 HTML代码: Javascript代码: 提示: Javascript代码请添加到网页中标签的后面。 如使用utf-8编码,则需要在...
  • 在很多网页为了方便用户带有百度搜索功能,当然有不少是广告联盟性质的,下面介绍的就是一个单纯的搜索功能。 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta ...
  • 百度搜索框代码,支持多种风格,颜色匹配
  • 在很多网页为了方便用户带有百度搜索功能,当然有不少是广告联盟性质的,下面介绍的就是一个单纯的搜索功能。 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta ...
  • 百度搜索代码

    2012-04-25 10:12:38
    百度搜索引擎代码,搜集网上部分搜索引擎代码,希望大家能用。
  • jQuery仿百度搜索框下拉热门关键词列表代码,点击搜索框弹出下拉热门关键词列表,点击关键词进行快捷搜索。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 72,923
精华内容 29,169
关键字:

百度搜索框代码