標籤：前端ui架構 伺服器 head 執行個體 預設參數 設定 方式 lazy div
前言：
jQuery，無需多作介紹，相信各位讀者都應該接觸或使用過了。jQuery UI，簡而言之，它是一個基於jQuery的前端UI架構。我們可以使用jQuery + jQuery UI非常簡單方便地製作出介面美觀、功能強大、跨瀏覽器安全色的前端html介面。
今天，我們就來介紹jQuery UI中一個功能非常強大的組件Autocomplete。
Autocomplete，是一個功能強大的自動完成輸入的jQuery外掛程式，它也是jQuery UI的一部分。相信用過百度或者Google搜尋的讀者一定不會陌生，當我們在搜尋方塊中開始輸入搜尋的關鍵字時，搜尋引擎就會智能地幫我們聯想並匹配我們所需的搜尋索引鍵內容。
現在，我們使用jQuery UI的Autocomplete組件就可以非常簡單方便地實現如上述圖片中Google搜尋方塊所具備的自動完成功能。
jQuery UI 的當前最新版本為1.10.4。由於不同版本之間的用法也有所差異，其他網站關於之前版本的Autocomplete用法介紹並不能完全適用於最新版本。因此，我們有必要瞭解一下jQuery UI Autocomplete的最新用法。
在使用Autocomplete實現自動完成功能之前，我們先來完成一些準備工作。比如，先編寫包含如下代碼的html檔案：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>jQuery Autocomplete入門樣本</title> </head> <body> <label for="language">請輸入指定的語言：</lable> <input id="language" name="language" type="text"> </body> </html>
對應的運行效果如下：
input.png
在完成上述準備工作之後，我們需要在html代碼中引入jQuery UI的js檔案和css檔案，由於jQuery UI是依賴於jQuery的，因此我們還需要在引入jQuery UI之前引入jQuery。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>jQuery Autocomplete入門樣本</title> <!-- 引入jQuery UI的css檔案 --> <link href="http://code.jquery.com/ui/1.10.4/themes/ui-darkness/jquery-ui.css" /> <!-- 引入jQuery的js檔案 --> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js" ></script> <!-- 引入jQuery UI的js檔案 --> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" ></script> </head> <body> <label for="language">請輸入指定的語言：</lable> <input id="language" name="language" type="text"> </body> </html>
現在，我們就來編寫js代碼讓language輸入框實現自動完成功能。要實現自動完成功能，我們需要如下調用jQuery UI擴充的autocomplete()方法：
$("#language").autocomplete(optionsObj);
這裡的optionsObj是一個用於配置autocomplete相關參數選項的JavaScript對象。我們可以參考Autocomplete官方文檔的相關說明來設定該對象。
Autocomplete有一個非常重要的屬性參數source，它表示用於自動完成功能的資料集合。source屬性的值可以是一個數組；也可以是一個字串，用於表示一個遠程請求的URL地址，通過處理該URL返回的資料從而獲得autocomplete所需的資料；它還可以是一個回呼函數，以便於完成一些複雜的資料處理。
現在，我們就使用最簡單的方式，給source屬性指定一個靜態數組，來初步實現自動完成功能。
$("#language").autocomplete({ source: [ "Chinese", "English", "Spanish", "Russian", "French", "Japanese", "Korean", "German" ] });
此時，使用瀏覽器訪問該html頁面就會發現，我們已經完成的最基本的自動完成功能了。
不過，有些時候我們希望列表顯示的文本和實際輸入的值並不一致。此時，我們為source指定多個對象的數組，每個對象必須包含label和value屬性，label表示顯示的文本，value表示實際輸入的值(當然它也可以包括其他屬性，你可以自行進行相關操作)。
$("#language").autocomplete({ // 靜態資料來源，根據label屬性進行顯示或模糊比對，當給輸入框設定value屬性值 source: [ { label: "Chinese", value: 1 }, { label: "English", value: 2 }, { label: "Spanish", value: 3 }, { label: "Russian", value: 4 }, { label: "French", value: 5 }, { label: "Japanese", value: 6 }, ]});// 最上面由多個字串組成的數組，會被視為label和value值相同、均為該字串的對象
更多的時候，我們希望該輸入框顯示的還是label屬性值，但還要給另外的元素(例如隱藏文本域)設定value屬性值，或者做一些其他處理。我們可以使用select事件來協助處理。
$("#language").autocomplete({ // 靜態資料來源 source: [ { label: "Chinese", value: 1, sayHi: "你好" }, { label: "English", value: 2, sayHi: "Hello" }, { label: "Spanish", value: 3, sayHi: "Hola" }, { label: "Russian", value: 4, sayHi: "Привет" }, { label: "French", value: 5, sayHi: "Bonjour" }, { label: "Japanese", value: 6, sayHi: "こんにちは" }, ], select: function(event, ui){ // 這裡的this指向當前輸入框的DOM元素 // event參數是事件對象 // ui對象只有一個item屬性，對應資料來源中被選中的對象 $(this).value = ui.item.label; $("#lang_id").val( ui.item.value ); $("#sayHi").html( ui.item.sayHi ); // 必須阻止事件的預設行為，否則autocomplete預設會把ui.item.value設為輸入框的value值 event.preventDefault(); }});
在實際應用上，我們的資料來源並不是一成不變的。大多數情況下，我們的資料都儲存在資料庫中，此時，我們就需要使用autocomplete通過AJAX請求擷取遠端資料作為資料來源。
$("#language").autocomplete({ source: "public.php" });
對應的 ajax-actions.php 的伺服器頁面代碼如下：
<?php header(‘Content-Type:text/html;charset=UTF-8‘); //為了方便舉例，這裡使用數組來類比，你也可以在實際應用中從資料庫中讀取資料 //返回的資料最好是數組或物件類型的JSON格式字串 $languages = array(‘Chinese‘, ‘English‘, ‘Spanish‘, ‘Russian‘, ‘French‘, ‘Japanese‘, ‘Korean‘, ‘German‘); echo json_encode($languages); ?>
此時，我們再次訪問該頁面，我們仍然可以看到自動完成的輸入效果。
從遠程伺服器擷取資料的自動完成功能
注意：細心的讀者可能已經注意到了，不管是從js數組中擷取資料，還是從後台伺服器擷取資料，我們的資料並沒有發生變化；但是，我們在從後台擷取資料的頁面輸入"c"時，顯示了所有的資料項目，而不是如之前一樣只顯示篩選過濾之後的"Chinese"和"French"。這是因為，當我們從遠程請求擷取資料時，Autocomplete認為伺服器已經進行了過濾處理，返回的資料都是直接可用的，無需再過濾。
在發送AJAX請求時，Autocomplete會把當前輸入框中的文字以預設參數名term的形式追加到我們設定的URL地址後面。當我們輸入一個c時，Autocomplete實際發送的請求路徑為/ajax-actions.php?term=c。
在上面的執行個體中，由於我們使用的是php數組來類比伺服器返回的資料，沒有根據使用者的輸入來返回對應的資料，才會導致上述結果。如果在實際應用中，使用類似如下SQL語句來查詢資料，則不會存在該問題。
<?php // 注意：對於使用者輸入一般需要進行額外的安全處理$term = $_GET[‘term‘];$sql = "select column1 as label, column2 as value, ... from table1 where column1 like ‘$term%‘";$languages = query($sql);echo json_encode($languages);?>
此外，有些時候我們需要根據使用者的輸入或其他動作來構造不同的請求URL，我們可以為source指定函數。Autocomplete將使用者輸入交給該函數，該函數可以進行任何處理，然後把通過任何方式獲得的資料交給Autocomplete處理即可。
$("#language").autocomplete({ // 通過函數來擷取並處理資料來源 source: function(request, response){ // request對象只有一個term屬性，對應使用者輸入的文本 // response是一個函數，在你自行處理並擷取資料後，將JSON資料交給該函數處理，以便於autocomplete根據資料顯示列表 // 自行處理並擷取資料... var dataObj = [...]; // 表示處理後的JSON資料 response(dataObj); // 最後將資料交給autocomplete去展示 }});
jQueryUI Autocomplete外掛程式使用入門教程(最新版)---------轉載
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
