零基礎打造一款屬於本身的網頁搜索引擎

時間 2021-02-22

標籤 css html jquery json 瀏覽器服務器網絡 app 編輯器性能欄目 HTML 简体版

原文原文鏈接

前言

在說這個以前，想必你們應該都比較瞭解搜索引擎了，它就是經過用戶在瀏覽器輸入框中輸入文本，從而顯示一些結果，你以爲哪項符合你要搜索的內容，你就點擊哪項。css

【1、項目準備】

瀏覽器：360瀏覽器html

編輯器：Sublime Text 3jquery

插件：Jquery-3.2.1.Min.Jsjson

【2、項目實現】

因爲是要實現一個網頁搜索引擎，因此咱們須要借用網頁三劍客（Html+Css+Javascript）,而後實現這一功能。瀏覽器

1.打開百度分析網頁結構

咱們能夠先看看百度的搜索引擎：服務器

能夠看到，這個搜索框的部分設置，好比關閉自動完成功能。而後咱們在隨便搜索內容來查看它的變化：網絡

能夠看到某些咱們查詢的關鍵字，因而咱們便發現了請求規律：app

https://www.baidu.com/s?+查詢字符參數

這就構成了咱們的一個完整的get請求，並且這裏面有不少關鍵字參數能夠省略掉，只須要保留重要的一部分就行了。因而，經試驗，得出以下結論：編輯器

https://www.baidu.com/s?wd=keyword

這個纔是請求的接口地址，只需將keyword參數替換爲任意搜索關鍵字便可實現查詢並跳轉到相應結果頁面。性能

2.編寫Html輸入框，搜索按鈕

看過以前寫的Html系列的文章，你將再也不對此感到困惑。

<html>
<head>
 <title></title>
 <style type="text/css">
    *{           內外邊距初始時爲0
       margin:0;    
       padding:0
    }
     input{
        width:300px;
        height:30px
    }
     span{
       position:absolute; 絕對定位
       background-color:red; 背景顏色
       border:1px solid gray; 邊框設置
       width:60px;
       height:32px;
       text-align:center 文字位置
    }
    span:hover{ 鼠標懸停時的樣式
        background-color:blue
    }
 </style>
</head>
<body>
<input type="text" name="" placeholder="請輸入要搜索的內容"> 文本框
<span>search</span> 搜索按鈕
</body>
</html>

編寫完成後進入瀏覽器查看，便可看到：

能夠看到，已經有點瀏覽器搜索框的意思了。

3.導入Jquery插件

<script src='jquery-3.2.1.min.js'></script>

4.編寫js腳本

這個是重中之重，打開瀏覽器，network,繼續分析：

能夠看到搜索結果就在裏面。而後打開這個請求的url地址，通過屢次實驗，發現就只有圖中標記的參數有變化：

因此咱們能夠得出結論，咱們只須要改變這兩個值便可。

1).建立刪除腳本

因而我先建立一個腳本標籤，不用它的時候隨時能夠清除，避免佔用內存，致使頁面打開遲緩，性能下降：

var script=document.createElement('script');  建立script的標籤
script.id='jsonp';   設置id爲jsonp
script.src='https://www.baidu.com/sugrec?prod=pc&cb=getData&wd='+wd;  設置它的地址
document.body.appendChild(script);   添加script元素到body中

而後等它不用了，隨時將它刪除：

var script=document.querySelector('#jsonp'); 選擇id爲jsonp的元素
script.parentNode.removeChild(script);     從這個元素的父元素中刪除這個元素

2).生成選項下拉菜單

咱們在瀏覽器能夠看到，只要一輸入文本，它就會彈出對應的選項讓咱們選擇，那麼這是如何辦到的了？

<script>
function getlist(wd){    /*獲取下拉列表*/
   var script=document.createElement('script');  /*建立script的標籤*/
   script.id='jsonp';   /*設置id爲jsonp*/
   script.src='https://www.baidu.com/sugrec?prod=pc&cb=getData&wd='+wd; /* 設置它的地址*/
   document.body.appendChild(script);   /*添加script元素到body中*/
}
function getData(data){  /*獲取數據*/
     var script=document.querySelector('#jsonp'); /*選擇id爲jsonp的元素*/
     script.parentNode.removeChild(script);  /*從這個元素的父元素中刪除這個元素*/
     $('ol').html('');  /* 設置有序列表的值爲空*/
     var da=data.g;   /* 獲取搜索的結果*/
  if(da){                     /*結果存在的話就將結果放到li標籤中*/
   da.forEach(function(item,index){  
     $('<li><a target="_blank" href ="https://www.baidu.com/s?wd='+item.q+'">'+item.q+'</a></li>').appendTo('ol');
    })
    }
}



     /* 判斷鍵盤是否按下*/
   $('input:text').keyup(function(){
      var wd=$(this).val();  /* 輸入框的值*/
      if(wd==''){           /*若是值是空，那麼就隱藏，不然顯示*/
          $('ol').css('display','none');
          $('ol').css('zIndex',-10);  
      }else{
          $('ol').css('display','block');
       $('ol').css('zIndex',20);
      }
         getlist(wd);
  });
   </script>

能夠看到，搜索結果已經出來了，並且有序列表下的"li"標籤也都對應的生成了。

3).給選項標記序列

咱們能夠看到，結果終於出來，可是我想給它個序列號，這樣就能夠知道搜索結果有多少個了。要設置的標記方式有不少種，能夠以數字開頭，也能夠是大小寫字母或者羅馬時間。在這裏我選擇數字，很簡單。

終於很是完美的實現了這一功能，是否是很驚豔了，趕快去試下吧。

4).搜索刷新

看到這裏相信你們應該都知道這個功能已經算是完成了，咱們只須要隨便點擊哪一個li標籤均可以訪問到相應的頁面。因而，我決定添加一個刷新的功能，屬於重連服務器的那種刷新：

<span onclick='window.location.reload()'>search</span> 點擊後當即刷新

【3、項目總結】

總的來講，對於初學者小白是個很不錯的練手項目，但願你們能從中有所收穫。

須要源碼的小夥伴，後臺回覆「搜索引擎」四個字便可獲取。
想學習更多Python網絡爬蟲與數據挖掘知識，可前往專業網站：http://pdcfighting.com/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。