原生JS實現百度搜索功能

阿新 • • 發佈：2018-01-21

pos pan elements font button stat post :hover ack

　　今天呢給大家分享一下自己用原生JS做的一個百度搜索功能，下面上代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!--百度iocn圖標-->
        <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon"/>
        <title>百度一下,你就知道</title>
        <style type="text/css">
            body{ 
/*清除瀏覽器自帶樣式*/
                margin: 0;
                padding: 0;
            }
            .box{/*最大的盒子*/
                width: 100%;
                /*background: yellow;*/
                height: 636px;
                background-image:url("https://ss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/skin/880.jpg?2");
                background 
-size: 100%;
                
            }
            .box_log{/*log盒子*/
                width: 100%;
            }
            
            .box_log img{/*百度log*/
                width: 19.8%;
                margin-left: 49.4%;
                transform: translate(-50%);
                margin-top: 38px;
                margin 
-bottom: 19px;
            }
            .box_text{/*text搜索框盒子大小*/
                width: 100%;
                height: 36px;
            }
            .log_img{/*input框中的小相機*/
                position: absolute;
                left: 865px;
                top: 202px;
            }
            #text{
                width: 540px;
                height: 36px;
                box-sizing: border-box;
                margin-left: 355px;
                margin-top: 3px;
                text-indent: 4px;
            }
            #btn{
                width: 100px;
                height: 36px;
                background: #3385FF;
                border: 0px;
                letter-spacing: 1px;
                color: white;
                margin-left: -5px;
                font-size: 15px;
                box-sizing: border-box;
                transform: translateY(2px);
                box-sizing: border-box;
            }
            #btn:hover{
                cursor: pointer;
            }
            #search{
                width: 540px;
                /*background: yellow;*/
                margin: 0;
                padding: 0;
                margin-left: 355px;
                list-style: none;
                display: none;
                border: 1px solid #E3E5E4; 
            }
            #search li{
                line-height: 36px;
                background: white;
            }
            #search li:hover{
                background: #F0F0F0;
            }
            .li1{
                text-indent: 4px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="box_log">
                <img src="../img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png"/>
            </div>
            <div class="box_text">
                <img src="../img/QQ圖片20180119115441.png" class="log_img"/>
                <input type="text" name="text" id="text" value=""/>
                <input type="button" name="bdyx" id="btn" value="百度一下" />
                <ul id="search">
                    <li class="li1" id="0" onclick="iptShow(this.id)"></li>
                    <li class="li1" id="1" onclick="iptShow(this.id)"></li>
                    <li class="li1" id="2" onclick="iptShow(this.id)"></li>
                    <li class="li1" id="3" onclick="iptShow(this.id)"></li>
                    <li class="li1" id="4" onclick="iptShow(this.id)"></li>
                    <li class="li1" id="5" onclick="iptShow(this.id)"></li>
                    <li class="li1" id="6" onclick="iptShow(this.id)"></li>
                    <li class="li1" id="7" onclick="iptShow(this.id)"></li>
                    <li class="li1" id="8" onclick="iptShow(this.id)"></li>
                    <li class="li1" id="9" onclick="iptShow(this.id)"></li>
                </ul>
            </div>
        </div>
        
        
        <script>
            var otext = document.getElementById("text");  //獲取input框
            ose = document.querySelector("#search");  //通過類名選擇器 選擇到search框
            lis = document.getElementsByClassName("li1");  //獲取所有的li
            otext.onkeyup = function(){   //當在input框中鍵盤彈起發生事件
                ose.style.display = otext.value?"block":"none";  /*三目運算符,如果otext.value的值部位空,則block。*/
                var osc = document.createElement("script");  /*創建一個script標簽*/
                osc.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+otext.value+"&cb=houxiaowei";
                /*srcipt的src值引入百度的url,然後將otext文本框中輸入的內容連接到url,在後面在運行自己的方法*/
                document.body.appendChild(osc);
                /*將創建好的script標簽元素放入body中*/
                
                
                /*input框中按下回車根據input的值跳轉頁面*/
                if(event.keyCode==13){
                    /*將百度作為連接,傳入input的值,並跳入新的頁面*/
                    window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+otext.value
                }
            }
            
            var count = 0;
            var search = 0;
            var arr = ose.children; /*獲取ose下的所有li*/
            function houxiaowei(json){
                var jsonLength = 0;  /*json長度的初始值*/
//                    console.log(json.s);  打印json數據中的所有數據
                for(var x in json.s){   /*將循環的次數變成json的長度*/
                    jsonLength++;　　　　　
                }
//                    console.log(jsonLength);  打印json數據的長度
                for(var i=0;i<lis.length;i++){
                    if(jsonLength==0){  /*如果遍歷出的長度等於0,li的值為空*/
                        arr[i].innerHTML = null;   
                    }else{
                        if(json.s[i]!=null){/*如果json[i]的值不等於空,則將它的值放入li中*/
                            arr[i].innerHTML = json.s[i];
                        }
                    }
                }
                if(count==lis.length-1){
                    count=0;
                    search=0;
                }
                count++;
                search++;
            }
            
            /*單擊li中的值顯示在input框中*/
            function iptShow(thisId){
                otext.value = arr[thisId].innerHTML;
                window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+otext.value
            }
            /*單擊body中的任意地方隱藏li*/
            document.body.onclick = function(){
                ose.style.display = "none";
            }
        
            /*單擊百度btn的時候觸發,並跳到新的連接*/
            var btn = document.querySelector("#btn");
            btn.onclick = function(){
                /*獲取當前input的值*/
                var otext = document.getElementById("text").value;
                /*將百度作為連接,傳入input的值,並跳入新的頁面*/
                window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+otext
            }  
        </script>
    </body>
</html>

原生JS實現百度搜索功能

pos pan elements font button stat post :hover ack 　　今天呢給大家分享一下自己用原生JS做的一個百度搜索功能，下面上代碼： <!DOCTYPE html> <html> <head&g

原生JS模擬百度搜索框

相關 class img mouse reat type 歌手 bubuko value 近期有個新入行的小夥伴一直在問一些基礎知識，突然覺得人的記憶力有限，有些平常很少用到的知識點雖簡單卻也其實很容易模糊，或者是一個單詞，或者是一個語法。所以想著應該利用一下工作之余的碎片

實現百度搜索框提示語功能

利用百度jsonp介面實現搜尋提示語. jsonp.js封裝 function jsonp(url, options) { // 建立script標籤 var $script = document.createElement('script'); // 解決快取問題

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

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

python實現百度搜索

python 爬蟲 mechanize 瀏覽器利用Python mechanize模塊模擬瀏覽器實現百度搜索# -*- coding:utf-8 -*- import mechanize import sys reload(sys) sys.setdefaultencoding(‘utf8‘

js仿百度搜索框

eat ucc txt tex text str jquer nbsp erro 1.js仿百度搜索框 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

利用api模擬百度搜索功能

his 數據 text blog mode post span eve 利用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

React實現百度搜索框

key component rop func tor true syn chan put import React,{Component} from ‘react‘ import ReactDOM,{render} from ‘react-dom‘ import ‘boo

案例：實現百度搜索提示

分析：在輸入框中輸入詞彙後，提示出以該關鍵字開頭的存在資料庫中的記錄一、搭建環境 1、定義首頁 <body> <center> <input type="text" name="word" id="word" style="width: 600

自定義函式實現百度搜索關鍵字在網頁中匹配字元高亮顯示效果

自定義函式實現類似百度搜索關鍵字在網頁中匹配字元高亮顯示效果。完全用php來實現簡單但很有趣的效果。函式如下： <?php /** * @param $wd 搜尋的詞語

JavaScript：使用原生JS實現Jsonp跨域，呼叫百度搜索介面完成聯想詞功能

Jsonp解釋 Jsonp這個術語聽起來很高大上，其實它的原理非常簡單，就是利用src不受同源策略限制這一點來實現的，很多標籤都有src特性。你們可以想想為什麼img標籤能將不同源的百度logo拿過來？ <img src="https://www.baidu.com/

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

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

09.VUE學習之watch監聽屬性變化實現類百度搜索欄功能ajax異步請求數據

class ivr url 實現類 int php head 實現 sta cmd下安裝axios npm install axios 安裝好後,會多出node_modules文件夾思路: 監聽data裏的word改變時,發送ajax異步請求數據, 把返回的數據賦值給d

09.1.VUE學習之watch監聽屬性變化實現類百度搜索欄功能ajax非同步請求資料,返回陣列

09.1html裡 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

實現類似百度搜索框中模糊提示功能

通常，在我們使用百度的時候，在輸入框中輸入某一個欄位的時候，就可以查詢到相關的資訊。類似的功能可以通過JS的框架來實現(顯然不會像百度那麼強大)。jquery提供了一種擴充套件外掛。可以實現獲取文字框內容然後自動向後臺提交請求。下面通過一段程式碼來展示這種功能。

python實現簡單的百度搜索

python 百度爬蟲#!/usr/bin/python # coding=utf-8 import urllib import urllib2 #實現百度關鍵字查詢的小例子 #定義基礎url url = "http://www.baidu.com/s?" #定義請求頭信息 headers = {"U

jsonp實現仿百度搜索（跨域訪問）

jsonp實現仿百度搜索一、jsonp跨域訪問原理利用script標籤的src屬性的漏洞實現跨域訪問，去訪問不同的伺服器二、仿百度搜索頁面實現 <!DOCTYPE html> <html> <head> <title>jsonp

HttpClient 實現爬取百度搜索結果（自動翻頁）

如果你對HttpClient還不是很瞭解，建議先移步我的另一篇部落格HttpClient4.x之請求示例後再來看這篇部落格。我們這裡的專案採用maven搭建。在閱讀前要對jdk和maven有一定的瞭解。另外開發工具這裡我這裡使用的是：Spring Tool Suite（STS）當然你也可以使用其

Ajax && Jquery&&百度搜索提示&&JQuery實現省市聯動

&nb

類似百度搜索下拉框的實現

從百度截圖如下：要實現的功能與該圖類似，只不過沒有詳細優化樣式。哈哈，大家不要介意。（還有我的這個功能用的是百度的介面）我用了兩種方式來實現這個功能，一種是原生的js方式，一種是jQuery的方式。可以對比。1、用原生方式實現。<!DOCTYPE html> &l

原生JS實現百度搜索功能

相關推薦