前言
在說這個(gè)之前，想必大家應(yīng)該都比較了解搜索引擎了，它就是通過用戶在瀏覽器輸入框中輸入文本，從而顯示一些結(jié)果，你覺得哪項(xiàng)符合你要搜索的內(nèi)容，你就點(diǎn)擊哪項(xiàng)。
【一、項(xiàng)目準(zhǔn)備】
瀏覽器：360瀏覽器
編輯器：Sublime Text 3
插件：Jquery-3.2.1.Min.Js
【二、項(xiàng)目實(shí)現(xiàn)】
由于是要實(shí)現(xiàn)一個(gè)網(wǎng)頁搜索引擎，所以我們需要借用網(wǎng)頁三劍客（Html+Css+Javascript）,然后實(shí)現(xiàn)這一功能。
1.打開百度分析網(wǎng)頁結(jié)構(gòu)
我們可以先看看百度的搜索引擎：
可以看到，這個(gè)搜索框的部分設(shè)置，比如關(guān)閉自動(dòng)完成功能。然后我們?cè)陔S便搜索內(nèi)容來查看它的變化：
可以看到某些我們查詢的關(guān)鍵字，于是我們便發(fā)現(xiàn)了請(qǐng)求規(guī)律：
https://www.baidu.com/s?+查詢字符參數(shù)
這就構(gòu)成了我們的一個(gè)完整的get請(qǐng)求，而且這里面有很多關(guān)鍵字參數(shù)可以省略掉，只需要保留重要的一部分就好了。于是，經(jīng)試驗(yàn)，得出如下結(jié)論：
https://www.baidu.com/s?wd=keyword
這個(gè)才是請(qǐng)求的接口地址，只需將keyword參數(shù)替換為任意搜索關(guān)鍵字即可實(shí)現(xiàn)查詢并跳轉(zhuǎn)到相應(yīng)結(jié)果頁面。
2.編寫Html輸入框，搜索按鈕
看過之前寫的Html系列的文章，你將不再對(duì)此感到困惑。
文本框
search 搜索按鈕
編寫完成后進(jìn)入瀏覽器查看，即可看到：
可以看到，已經(jīng)有點(diǎn)瀏覽器搜索框的意思了。
3.導(dǎo)入Jquery插件
可以看到，搜索結(jié)果已經(jīng)出來了，而且有序列表下的"li"標(biāo)簽也都對(duì)應(yīng)的生成了。
3).給選項(xiàng)標(biāo)記序列
我們可以看到，結(jié)果終于出來，但是我想給它個(gè)序列號(hào)，這樣就可以知道搜索結(jié)果有多少個(gè)了。要設(shè)置的標(biāo)記方式有很多種，可以以數(shù)字開頭，也可以是大小寫字母或者羅馬時(shí)間。在這里我選擇數(shù)字，很簡單。
終于非常完美的實(shí)現(xiàn)了這一功能，是不是很驚艷了，趕快去試下吧。
4).搜索刷新
看到這里相信大家應(yīng)該都知道這個(gè)功能已經(jīng)算是完成了，我們只需要隨便點(diǎn)擊哪個(gè)li標(biāo)簽都可以訪問到相應(yīng)的頁面。于是，我決定添加一個(gè)刷新的功能，屬于重連服務(wù)器的那種刷新：search 點(diǎn)擊后立即刷新
【三、項(xiàng)目總結(jié)】
總的來說，對(duì)于初學(xué)者小白是個(gè)很不錯(cuò)的練手項(xiàng)目，希望大家能從中有所收獲。
聯(lián)系客服
