jquery 實作自動提示功能

在現代的 Web 應用程式中，自動提示功能是非常基本的功能之一。自動提示可以讓使用者方便地在輸入框中輸入內容時獲得智慧提示並加速輸入速度，這樣可以大大縮短使用者等待載入結果時的時間。

那麼，要如何使用 jQuery 來實現自動提示功能呢？以下就介紹一下具體的實作過程。

一、準備工作
在開始實作前，首先需要準備好 jQuery 函式庫及相關的 CSS 檔案。可以選擇從官網下載庫檔案並在 HTML 檔案中引入，也可以使用 CDN 加速庫檔案的載入速度。

在 CSS 檔案方面，可以使用 Bootstrap 提供的樣式來美化提示框的外觀。不過，這並不是必要的步驟。如果不需要美化樣式，可以不用引入樣式檔案。

二、取得資料
自動提示需要提供一個資料來源，也就是在使用者輸入內容時，從該資料來源取得與輸入內容相關的提示資訊並顯示在使用者面前。這個資料來源可以是一個 JSON 檔案、一個資料庫表或是一個 API 介面。

在本例中，我們採用了一個簡單的 JSON 檔案作為資料來源。這個檔案包含了一些城市的名稱，我們將在使用者輸入時為其提供智慧提示。

在檔案引入方面，可以使用 AJAX 方法從伺服器中取得 JSON 資料。為了方便，這裡我們直接在 HTML 檔案中引入。

三、寫程式碼
接下來，我們就可以開始寫程式碼了。

1. HTML 結構

在 HTML 結構中，我們需要一個輸入框及一個提示框來顯示智慧提示內容。具體架構如下：

<input id="search-box" type="text" placeholder="输入城市名" />
<div id="suggestion-box"></div>

2. jQuery 程式碼

首先需要在文件載入完成之後取得文字方塊和提示方塊元素，並在文字方塊中綁定一個keyup 事件，當使用者輸入時，觸發該事件。

接著，對於每次輸入，我們都要從資料來源中獲取與輸入內容相關的提示訊息，並將其顯示在提示框中。

具體程式碼如下：

$(document).ready(function() {
  // 获取输入框和提示框元素
  var searchBox = $('#search-box');
  var suggestionBox = $('#suggestion-box');

  // 绑定 keyup 事件
  searchBox.keyup(function() {
    // 获取输入框的值
    var currentText = searchBox.val();

    // 根据输入框的值从数据源中获取匹配的提示信息
    var filteredData = data.filter(function(item) {
        return item.toLowerCase().indexOf(currentText.toLowerCase()) > -1;
    });

    // 根据获取到的提示信息生成提示框的内容
    var html = '';
    for (var i = 0; i < filteredData.length; i++) {
        html += '<div class="item">' + filteredData[i] + '</div>';
    }

    // 将生成的内容填充到提示框中
    suggestionBox.html(html);
  });
});

其中，data 表示一個全域變量，用於儲存從資料來源中取得到的資訊。這裡我們先將其簡單地定義成了一個包含城市名稱的數組，其具體內容如下：

var data = ['北京', '上海', '广州', '深圳', '杭州', '南京', '武汉', '成都'];

4. CSS 樣式

除了JavaScript 程式碼外，還需要一些CSS 樣式來美化提示框。在這裡，我們使用了Bootstrap 提供的樣式，程式碼如下：

#suggestion-box {
  position: relative;
  z-index: 999;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  cursor: pointer;
}

#suggestion-box .item {
  padding: 5px 10px;
  font-size: 14px;
}

#suggestion-box .item:hover {
  background: #f5f5f5;
}

四、總結

透過上述程式碼，我們實作了一個簡單的自動提示功能，可以為使用者提供智慧提示並加速輸入速度。當然，在實際的應用程式中，還可以進行更多的最佳化工作，例如使用快取來加速資料來源的存取速度，使用非同步載入來避免阻塞頁面等等。

以上是jquery 實作自動提示功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！