Jquery搜尋框效果(百度關鍵詞聯想)

阿新 • • 發佈：2019-01-25

可以實現關鍵詞聯想的，搜尋框；集合了百度，谷歌，搜狗，360，騰訊等多家搜尋

search.html的程式碼：

<!doctype html>
<html>
    <head>
        <title>搜尋框例子</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="./js/jquery-2.1.3.min.js" 
></script>

        <script type="text/javascript" src="./js/keyword.js"></script>

        <link href="./css/search.css" rel="stylesheet" type="text/css">
        <style type="text/css">
         *{margin:0 auto}

        </style>
    </head>
    <body>
        <!--start search--> 

            <div id="search_bg" style="margin-top:20px;margin-bottom:20px;">
                <div id="button_bg">
                    <div class="seach_type">
                        <span class="type">站內搜尋</span>
                        <span class="type">百度搜索</span 
>
                        <span class="type">360搜尋</span>
                        <span class="type">騰訊搜尋</span>
                        <span class="type">搜狗搜尋</span>
                        <span class="type">谷歌搜尋</span>
                    </div>
                    <span class="changetype"></span>
                    <form action="http://www.baidu.com/s" method="GET" target="_blank"  >
                        <input type="text" value="" x-webkit-speech="" lang="zh-CN" placeholder="點選搜尋" name="wd" class="textb" autocomplete="off"><!--autocomplete 遮蔽輸入自動記錄-->
                        <input type="submit" name="sub" value="百度一下" class="subb">
                    </form>
                    <div class="keyword"></div>
                </div>
            </div>
        <!--end start-->
    </body>
</html>

search.css的程式碼如下:

/*---------------------搜尋框樣式-------------------------------*/
#search_bg{
    width: 960px;
    height:50px;
}

#search_bg #button_bg .seach_type{
    display: block;
    width: 80px;
    height: auto;
    padding: 0px;
    border: solid 1px rgba(204,204,204,0.5);
    position: absolute;
    top:45px;
    left: 20px;
    display: none;
    z-index: 21;
}
#search_bg #button_bg .seach_type .type{
    display: block;
    width: 80px;
    height: 26px;
    background: rgba(255,255,255,0.3);
    border-bottom:dashed 1px #cccccc;
    text-align: center;
    line-height:26px;
    cursor: pointer;
}
#search_bg #button_bg .seach_type .type:hover{
    color: #126AC1;
}
#search_bg #button_bg .changetype{
    display: block;
    width: 8px;
    height: 12px;
    position: absolute;
    top:20px;
    left: 30px;
    cursor: pointer;
    background: url(../images/class_1_16_1.png);
}
#search_bg #button_bg{
    width:600px;
    height: 50px;

    position: relative;
}
#search_bg #button_bg .textb{
    display: block;
    width: 400px;
    height: 36px;
    outline: none;
    background: none;
    border:solid 1px #CCCCCC;
    float:left;
    margin-top:5px;
    margin-left:20px;
    text-align: left;
    text-indent: 20px;
    font-size: 15px;

}
#search_bg #button_bg .subb{
    display: block;
    width: 80px;
    height: 40px;
    outline: none;
    border: none;
    background: #1F76CB;
    float: left;
    margin-top:5px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(28,116,203,0.5);
    color: #ffffff;
    font-size: 15px;
    text-shadow:0 1px 2px rgba(245,247,250,0.2);
}
#search_bg #button_bg .textb:focus{
    border:solid 1px #1F76CB;
}
#search_bg #button_bg .subb:hover{
    box-shadow: 0 1px 3px rgba(28,116,203,1);
}
#search_bg #button_bg .keyword{
    width: 400px;
    height: auto;
    border:solid 1px #cccccc;
    border-top:none;
    position: absolute;
    top:45px;
    left:20px;
    z-index:40;
    box-shadow: 1px 2px 2px rgba(5,5,5,0.1);
    display: none;
}
#search_bg #button_bg .keyword span{
    display: block;
    clear: both;
    width: 400px;
    height: 30px;
    text-indent:15px;
    line-height: 30px;
    cursor: pointer;
    background: rgba(255,255,255,0.3);
    border-bottom:dashed 1px #cccccc;
}
#search_bg #button_bg .keyword span:hover{
    background: rgba(0,0,0,0.5);
}

/*------------------seach結果集樣式---------------------*/

#search_result{
width: 960px;
height: auto;
min-height: 400px;
overflow: hidden;
}
#search_result .result_num{
width: 960px;
height: 26px;
text-align: left;
text-indent: 15px;
font-size: 15px;
line-height: 26px;
color:#767676;

}
#search_result .result{
width: 960px;
height: auto;
max-height: 110px;
margin-top:15px;
margin-bottom: 15px;
padding-top: 15px;
padding-bottom: 15px;
text-indent: 20px;
line-height: 25px;
color: #333333;
text-overflow: ellipsis;
overflow: hidden;/*以上三行實現溢位顯示省略號*/
border-bottom:dashed 1px #cccccc;
}
#result_page{
    width: 960px;
    height: 30px;
}
#result_page a{
    display: block;
    float: left;
    margin-left:5px;
    width: 30px;
    height: 30px;
    text-align: center;
    text-decoration: none;
    line-height: 30px;
    background: none;
    color: #363636;
    border:solid 1px #A5A5A5;
    transition:all .5s linear;
    -webkit-transition: al.5s linear;/* Safari and Chrome or liebao*/
    -moz-transition: all .5s linear;/*Firefox */
    -o-transition: all .5s linear;/*Opera */
    -ms-transition: all .5s linear;/*for ie*/
}
#result_page a:hover{
    color:#0A67C1;
    border:solid 1px #0A67C1;
}
#result_page .nowpage{
    border:solid 1px #EAE8E8;
    color:#0F9512;
}
#result_page .previous,
#result_page .next{
    width: 80px;
    height: 30px;
}

keyword.js的程式碼如下:

$(document).ready(function(){
    /*--------------------搜尋框樣式控制js------------------------*/
    var checktype=$("#search_bg #button_bg .changetype");
    var type=$("#search_bg #button_bg .seach_type .type");
    var seach_type=$("#search_bg #button_bg .seach_type");
    var form=$("#search_bg #button_bg form");
    var textb=$("#search_bg #button_bg form .textb");
    var subb=$("#search_bg #button_bg form .subb");
    var tbcolor="#126AC1";
    textb.focus();//文件載入完畢 搜尋框獲取焦點
    var search_types={
        "types":[{name:"wd",action:"./search.php",value:"搜尋本站",subcolor:"#126AC1",stype:"./images/sanjiao_03.png"},
                 {name:"wd",action:"http://www.baidu.com/s",value:"百度一下",subcolor:"#126AC1",stype:"./images/sanjiao_03.png"},
                 {name:"q",action:"http://www.so.com/s",value:"360搜尋",subcolor:"#53C920",stype:"./images/sanjiao_04.png"},
                 {name:"w",action:"http://www.soso.com/q",value:"騰訊搜尋",subcolor:"#760AAA",stype:"./images/sanjiao_05.png"},
                 {name:"query",action:"http://www.xuan369.com/so/qqkk8.jsp",value:"搜狗搜尋",subcolor:"#F94F1B",stype:"./images/sanjiao_06.png"},
                 {name:"q",action:"http://209.85.228.42/search",value:"谷歌搜尋",subcolor:"#29C971",stype:"./images/sanjiao_07.png"}
                ]};
    //alert(search_types.types[1].value);
    //選擇搜尋型別按鈕被點選
    checktype.click(function(){
        seach_type.css({"display":"block",height:0});
        seach_type.animate({
            height:(type.height()+1)*type.length,
        },500);

    });

    type.click(function(){
        //alert(search_types.types[$(this).index()].value)
        form.attr("action",search_types.types[$(this).index()].action);//改變表單提交位置
        textb.attr("name",search_types.types[$(this).index()].name);//改變表單變數名
        subb.val(search_types.types[$(this).index()].value);//改變按鈕顯示
        subb.css({background:search_types.types[$(this).index()].subcolor});//改變按鈕顏色
        tbcolor=search_types.types[$(this).index()].subcolor;//改變輸入框邊框顏色
        checktype.css({"background":"url("+search_types.types[$(this).index()].stype+")"});
        subb.css({"box-shadow":"0 1px 2px "+search_types.types[$(this).index()].subcolor});
        textb.focus();//編輯框獲取焦點
        seach_type.animate({
            height:0,
        },500,function(){
            seach_type.css({"display":"none",height:0});
        });
    });

    seach_type.mouseleave(function(){
        seach_type.animate({
            height:0,
        },500,function(){
            seach_type.css({"display":"none",height:0});
        });
    });
    textb.focus(function(){
        textb.css({border:"solid 1px "+tbcolor});
        //
        seach_type.animate({
            height:0,
        },500,function(){
            seach_type.css({"display":"none",height:0});
        });
    });
    textb.blur(function(){
        textb.css({border:"solid 1px "+"#CCCCCC"});
    });
    /*-----------------獲取關鍵詞js---------------------*/
    var textb=$("#search_bg #button_bg form .textb");
    textb.keyup(function(event){
        if(textb.val()==""||textb.val()==" "){
            return;
        }
        if(event.which!=39&&event.which!=40&&event.which!=37&&event.which!=38&&event.which!=13)
        $.ajax({
            url:"http://suggestion.baidu.com/su",
            type:"GET",
            dataType:"jsonp",
            jsonp: 'jsoncallback',
            async: false,
            timeout: 5000,//請求超時
            data:{
                "wd":textb.val(),
                "cb":"keydata"
            },
            success: function (json) {
            },
            error: function (xhr) {
                return;
            }

        });
    });

});
//列印關鍵詞
function keydata(keys){
        var len=keys.s.length;
        var keywordbox=$("#search_bg #button_bg .keyword");//關鍵詞盒子
        var textb=$("#search_bg #button_bg form .textb");
        var subb=$("#search_bg #button_bg form .subb");
        if(len==0){
            keywordbox.css({display:"none"});
        }else{
            keywordbox.css({display:"block"});
        }
        var spans="";
        for(var i=0;i<len;i++)
        {
            spans+="<span>"+keys.s[i]+"</span>"
        }
        keywordbox.html(spans);//把關鍵詞寫入關鍵詞盒子
        keywordbox.animate({
            height:(keywordbox.children().height()+1)*len//關鍵詞下滑效果
        },100);
        //點選候選詞彙
        keywordbox.children().click(function(){
            textb.val($(this).html());//選中詞彙放入輸入框

            keywordbox.animate({
                height:0//關鍵盒子收縮效果
            },10,function(){
                keywordbox.css({display:"none",height:"auto"});
                keywordbox.empty();//清空盒子內容
            });

            textb.focus();//輸入框獲取焦點*/
            $("#search_bg #button_bg form").submit();//提交搜尋
        });

        //提交按鈕獲取焦點後
        subb.focus(function(){//提交按鈕獲取焦點後
            keywordbox.animate({
                height:0//關鍵盒子收縮效果
            },10,function(){
                keywordbox.css({display:"none",height:"auto"});
                keywordbox.empty();//清空盒子內容
            });
        });

        /*textb.blur(function(){//輸入框失去焦點後收縮關鍵詞盒子(此方法會與點選候選詞方法衝突造成失效)
            keywordbox.animate({
                height:0//關鍵盒子收縮效果
            },100,function(){
                keywordbox.css({display:"none",height:"auto"});
                keywordbox.empty();//清空盒子內容
            });
        });*/
        keywordbox.mouseleave(function(){//滑鼠離開關鍵字盒子後收縮關鍵詞盒子（取代上一個方法）
            keywordbox.animate({
                height:0//關鍵盒子收縮效果
            },100,function(){
                keywordbox.css({display:"none",height:"auto"});
                keywordbox.empty();//清空盒子內容
            });
        });
        var numspan=0;//用來指定選擇候選詞（通過方向鍵改變）
        textb.keydown(function(event){//如果使用回車提交時，關鍵詞盒子也可以自動收縮
            if(event.which==13){
                keywordbox.animate({
                height:0//關鍵盒子收縮效果
                },10,function(){
                    keywordbox.css({display:"none",height:"auto"});
                    keywordbox.empty();//清空盒子內容
                });
                /*$("#search_bg #button_bg form").submit(function(){
                    return false;//阻止提交
                });*/
                /*$("#search_bg #button_bg form").submit(function(e){
                    e.preventDefault();//阻止提交方法2
                });*/
            }
            //按下下方向鍵
            if(event.which==40){

                if(numspan==len)
                    numspan=0;
                for(var i=0;i<len;i++){
                    if(numspan==i){
                        keywordbox.children().eq(i).css({
                            "background-color":"rgba(0,0,0,0.3)"
                        });
                    }else{
                        keywordbox.children().eq(i).css({
                            "background-color":"rgba(255,255,255,0.3)"
                        });
                    }
                }
                textb.val(keywordbox.children().eq(numspan).html());
                numspan++;
            }
            //按下上方向鍵
            if(event.which==38){

                numspan--;
                if(numspan==len)
                    numspan=0;
                for(var i=0;i<len;i++){
                    if(numspan==i){
                        keywordbox.children().eq(i).css({
                            "background-color":"rgba(0,0,0,0.3)"
                        });
                    }else{
                        keywordbox.children().eq(i).css({
                            "background-color":"rgba(255,255,255,0.3)"
                        });
                    }
                }
                textb.val(keywordbox.children().eq(numspan).html());

            }
        });
        keywordbox.children().mouseover(function(){
            numspan=$(this).index();
            for(var i=0;i<len;i++){
                    if(numspan==i){
                        keywordbox.children().eq(i).css({
                            "background-color":"rgba(0,0,0,0.3)"
                        });
                    }else{
                        keywordbox.children().eq(i).css({
                            "background-color":"rgba(255,255,255,0.3)"
                        });
                    }
                }
                textb.val(keywordbox.children().eq(numspan).html());
        });

}

頁面效果如圖:

這裡寫圖片描述

Jquery搜尋框效果(百度關鍵詞聯想)

可以實現關鍵詞聯想的，搜尋框；集合了百度，谷歌，搜狗，360，騰訊等多家搜尋 search.html的程式碼： <!doctype html> <html> <head> <

JS實現輸入框類似百度搜索的智慧提示效果

1.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Selenium2+python自動化34-獲取百度輸入聯想詞

keys else ID 通過 IT utf-8 img 如果 http 前言最近有小夥伴問百度輸入後，輸入框下方的聯想詞如何定位到，這個其實難度不大，用前面所講的元素定位完全可以定位到的。本篇以百度輸入框輸入關鍵字匹配後，打印出聯想詞匯。一、定位輸入框聯想詞 1.首

鎮江SEO搜尋優化：百度秒收錄小方法！

鎮江SEO搜尋優化的圈子相對較小，很多SEO人員喜歡追求極致的SEO策略，比如：百度秒收錄，而實際上，並沒有嚴格意義上的秒收錄。所謂的百度秒收錄，只是一個形象的比喻，達到分鐘級的收錄，目前來看還是可以的。那麼，鎮江SEO搜尋優化：百度秒收錄小方法有哪些？根據以往鎮江SEO搜尋

帶搜尋欄的百度地圖-H5-搜尋

先看效果 HTML <div class="contact-map-wrapper"> <div id="allmap" class="contact-map"></div

[圖文講解]強大的谷歌搜尋技巧，百度360搜狗什麼的就是渣渣

首先推薦篇關於谷歌搜尋的大體文章給大家看看，望大家對谷歌搜尋有個初步的印象和了解善用GOOGLE -- 從入門到精通 (DOC 簡體字版由網站下載，原作者不詳) 修正版：方煒臺大生機系一 GOOGLE 簡介二 GOOGLE 特色三基本搜尋： +,

bootstrap模態框引用百度地圖出現中心點偏移到左上角

當發生中心進行偏移到左上角的時候，我們要知道為什麼會發生這個問題　　原因就是模態框在沒有彈出的時候，即隱藏狀態下，地圖api會預設為寬高為0，所以他的初始寬高為0，因此中心點不管取什麼值都會在左上角解決方案：　　我們首先要了解一個地圖api的事件：tilesloaded

ios 一步一步學會自定義地圖吹出框(CalloutView)-->(百度地圖，高德地圖,google地圖)

前言在ios上邊使用地相簿的同學肯定遇到過這樣的問題：吹出框只能設定title和subtitle和左右的view，不管是百度地圖還是高德地圖還是自帶的google地圖，只提供了這四個屬性，如果想新增更多的view，只能自定義。可是，類庫只能看到.h檔案，.m都看不

2018百度關鍵詞排名優化實用方法

　　今天跟大家說一些乾貨，講老實話，這些百度關鍵詞排名優化方法都是個人心得，也跟網上的許多百度關鍵詞排名優化方法不一樣，可能會違背很多人對SEO的正常理解，但是經過了我自己的測試，我把他分享出來，希望有緣人可以看到這篇文章。　　一、首先我們要影響了解百度關鍵詞排名優化的規則：

ios 一步一步學會自定義地圖吹出框(CalloutView)-->(百度地圖，高德地圖,google地圖)...

前言在ios上邊使用地相簿的同學肯定遇到過這樣的問題：吹出框只能設定title和subtitle和左右的view，不管是百度地圖還是高德地圖還是自帶的google地圖，只提供了這四個屬性，如果想新增更多的view，只能自定義。可是，類庫只能看到.h檔案，.m都看不到

學習vue-cli時需要引入外部js庫檔案(如jquery)的問題，百度後解決了，再次備忘一下

原文連結:http://www.cnblogs.com/pandabunny/p/5417938.html 感謝這位哥們兒的無私分享在vue-cli 生成的工程中引入jquery，記錄一下。(模板用的webpack) 首先在package.json裡的depend

c#+jquery-autocomplete實現類似百度，Google模糊查詢

由於現有系統有一個介面顯示不友好，因此寫單獨重寫了這個頁面。期中有個要查詢庫位的功能。閒著沒事做成類似百度，Google模糊查詢的效果了中英文都可以。效果圖： JS程式碼如下：首先引用 css js 可到官方網站去下載點選開啟連結 <link hr

可模糊查詢輸入框(仿百度搜索欄)

很早之前做了個通用版的，當時做的時候有個初步的想法。 1.鍵盤每輸入一個字母觸發一次（onkeyup觸發事件） 2.設定一個隱藏框<div></div>（div的css樣式display設為none 設定寬高定好位置） 3.每次觸發（onkeyu

海量資料搜尋---demo展示百度、谷歌搜尋引擎的實現

在我們平常的生活工作中，百度、谷歌這些搜尋網站已經成為了我們受教解惑的學校，俗話說得好，“有問題找度娘”。那麼百度是如何在海量資料中找到自己需要的資料呢？為什麼它搜尋的速度如此之快？我們都知道是因為百度的搜尋引擎，那麼搜尋引擎到底是個什麼東西呢？可能有的程式設計師會想到es，但是es並不能代表搜尋引擎，它只是

requests筆記3---百度360搜尋關鍵詞提交

import requests keyword = 'Python' url = 'http://www.so.com/s' try: kv = {'q':keyword} r = requests.get(url,parama=kv) &

原生AJAX+jsp+servlet實現百度搜索框提示效果

我們這裡使用HTML5的新特性datalist實現輸入框的自動下拉提示，用datalist通過id與input關聯起來，在搜尋時就會出現下拉框。下面是HTML程式碼。　　 <input type="text" size="50" id="sear

百度地圖開發(八)輸入框搜尋根據關鍵字檢索出現列表

看圖效果就是輸入自動提示熱詞,點選熱詞賦值給輸入框介面卡程式碼 package com.example.administrator.baidumap1; /* * @Comment : * @Created :2018/10/26 14:11 *

在Axure裡面搜尋框聯想詞效果如何實現

在這個網際網路時代，每天都會用到搜尋功能，手機，網頁，各種各樣的搜尋框，而且做得越來越出色，只要輸入部分關鍵詞，就能看到很多候選詞，可以幫助到無法準確定位自己想要搜尋的東西，這樣做解決了很大部分人的選擇困擾。本文將會帶帶大家學習如何在Axure（http://www.axurechina.c

仿百度首頁登陸框拖拽效果（可視視窗內拖動）

window.onload = function() { //獲取函式物件 function G(id) { return document.getElementById(id);

類似百度的搜尋框的下拉的匹配使用最簡單的方式

在做專案的時候，需要用到那種模糊查詢的時候了，但是使用模糊查詢迴圈的查詢資料彷彿顯得不是那麼的現實，也就從網上找了一下資源，看了幾個不錯的例子，挑出了我最欣賞的一個例子來解析一下吧。我們使用的是jQuery Autocomplete外掛需要引入JQuery-UI的js和css等

Jquery搜尋框效果(百度關鍵詞聯想)

可以實現關鍵詞聯想的，搜尋框；集合了百度，谷歌，搜狗，360，騰訊等多家搜尋

search.html的程式碼：

search.css的程式碼如下:

keyword.js的程式碼如下:

頁面效果如圖:

相關推薦