首頁 > 文章 > web前端 > JavaScript實現百度搜尋

JavaScript實現百度搜尋

王林原創: 2023-05-26 20:16:061637瀏覽

JavaScript是一種高階的、解釋型的程式語言，廣泛應用於Web開發中。其中，JavaScript透過可以使網頁具有動態效果、互動性和邏輯功能。百度搜尋是網站常見的功能之一，本文將介紹如何透過JavaScript實現百度搜尋。

HTML結構

首先，需要在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實作搜尋功能

接下來，我們需要透過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中傳遞的參數符合標準。

UI美化

為了讓搜尋功能更加美觀、易於使用，我們可以透過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中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：火狐瀏覽器怎麼開啟javascript下一篇：火狐瀏覽器怎麼開啟javascript

看更多