JavaScript是一種高階的、解釋型的程式語言，廣泛應用於Web開發中。其中，JavaScript透過可以使網頁具有動態效果、互動性和邏輯功能。百度搜尋是網站常見的功能之一，本文將介紹如何透過JavaScript實現百度搜尋。
首先，需要在HTML檔案中建立搜尋框和提交按鈕等元件。這裡我們以百度首頁的搜尋框為例：
<form id="search-form" action="http://www.baidu.com/s" target="_blank"> <input type="text" id="search-input" name="wd" autocomplete="off" placeholder="请输入关键字"> <button type="submit" id="search-button">搜索</button> </form>
程式碼中，form表示表單元件，action屬性指定了提交的位址（這裡是百度搜尋的位址），target指定了在新視窗中開啟搜尋結果。文字方塊的id為search-input，按鈕的id為search-button，這兩個id在後面的JavaScript程式碼中會用到。
接下來，我們需要透過JavaScript編寫程式碼實作搜尋功能。在script標籤中加入以下程式碼：
var form = document.getElementById('search-form');
var input = document.getElementById('search-input');
form.onsubmit = function(e) {
e.preventDefault();
var query = input.value;
window.location.href = 'http://www.baidu.com/s?wd=' + encodeURIComponent(query);
};首先，透過document.getElementById方法取得搜尋框和表單元件。然後，為表單元件的onsubmit事件新增一個回呼函數，阻止表單預設的提交行為。在回呼函數的裡面，取得搜尋框中的文字值，並使用window.location.href屬性進行重定向，把查詢字串拼接到百度搜尋的位址中。
值得注意的是，由於查詢字串中可能包含特殊字符，需要使用encodeURIComponent方法來進行編碼，確保在URL中傳遞的參數符合標準。
為了讓搜尋功能更加美觀、易於使用，我們可以透過CSS樣式對搜尋框和按鈕進行美化。可以加入以下程式碼：
#search-form {
display: inline-block;
padding: 10px;
background-color: #f1f1f1;
border-radius: 5px;
box-shadow: 0 1px 2px #ccc;
font-size: 14px;
}
#search-input {
width: 300px;
height: 30px;
padding: 5px;
border: none;
border-radius: 5px;
outline: none;
font-size: 16px;
}
#search-button {
width: 80px;
height: 40px;
margin-left: 5px;
background-color: #3385ff;
color: #fff;
border: none;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
}
#search-button:hover {
background-color: #2366d1;
}程式碼中，我們為搜尋框和按鈕分別添加了樣式，包含了背景色、邊框、圓角、陰影、字體大小等屬性。另外，按鈕在滑鼠懸停時顏色發生變化，增加了互動性。
除了基本的搜尋功能，我們還可以透過JavaScript實作查詢關鍵字自動補全。當使用者輸入一些字母後，會根據輸入的內容顯示相符的搜尋關鍵字。
我們可以藉助第三方函式庫jquery-ui來實現輸入自動補全的功能。在程式碼維護上也會更加簡單。
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<!--...-->
<script>
$(function() {
$("#search-input").autocomplete({
source: function(request, response) {
$.ajax({
url: "http://www.baidu.com/sugrec",
dataType: "jsonp",
data: {
wd: request.term
},
success: function(data) {
var results = [];
if (data.g && data.g.length) {
$.each(data.g, function(i, val) {
results.push({
label: val.q,
value: val.q
});
});
}
response(results);
}
});
},
minLength: 1,
delay: 150
});
});
</script>
</body>我們借用了百度提供的介面進行了關鍵字的提示。發現input輸入框的id使用了jqueryUI框架的autocomplete函數來實現關鍵字聯想。其中，source設定介面位址，dataType設定回應資料類型，data請求參數設定。回傳資料處理方法存放於success中，篩選關鍵字並設定到results陣列中，最後傳回給response中。 minLength設定提示字最少需要查詢的字元數量，delay設定查詢請求的延遲時間。
本文以百度搜尋為例，介紹如何使用JavaScript實作基本的搜尋功能和自動補全功能。當然了，這只是一個簡單的實現，百度搜尋的實現不只以上兩個功能，還有熱門推薦、相關搜尋等等功能，需要在實踐中持續不斷地學習與完善。同時，結合其他前端技術與框架可以實現更多強大的搜尋功能。
以上是JavaScript實現百度搜尋的詳細內容。更多資訊請關注PHP中文網其他相關文章！
