相信用過百度或者Google搜索的讀者一定不會陌生，當(dāng)我們在搜索框中開始輸入搜索的關(guān)鍵字時，搜索引擎就會智能地幫我們聯(lián)想并匹配我們所需的搜索關(guān)鍵字內(nèi)容。

Google搜索輸入框的自動完成功能

現(xiàn)在，我們使用jQuery UI的Autocomplete部件就可以非常簡單方便地實現(xiàn)如上述圖片中Google搜索框所具備的自動完成功能。

jQuery UI 的當(dāng)前最新版本為1.10.4。由于不同版本之間的用法也有所差異，其他網(wǎng)站關(guān)于之前版本的Autocomplete用法介紹并不能完全適用于最新版本。因此，我們有必要了解一下jQuery UI Autocomplete的最新用法。

在使用Autocomplete實現(xiàn)自動完成功能之前，我們先來完成一些準(zhǔn)備工作。比如，先編寫包含如下代碼的html文件：

對應(yīng)的運行效果如下：
 

在完成上述準(zhǔn)備工作之后，我們需要在html代碼中引入jQuery UI的js文件和css文件，由于jQuery UI是依賴于jQuery的，因此我們還需要在引入jQuery UI之前引入jQuery。

現(xiàn)在，我們就來編寫js代碼讓language輸入框?qū)崿F(xiàn)自動完成功能。要實現(xiàn)自動完成功能，我們需要如下調(diào)用jQuery UI擴展的autocomplete()方法：

$("#language").autocomplete(optionsObj);

這里的optionsObj是一個用于配置autocomplete相關(guān)參數(shù)選項的JavaScript對象。我們可以參考Autocomplete官方文檔的相關(guān)說明來設(shè)置該對象。

Autocomplete有一個非常重要的屬性參數(shù)source，它表示用于自動完成功能的數(shù)據(jù)集合。source屬性的值可以是一個數(shù)組；也可以是一個字符串，用于表示一個遠(yuǎn)程請求的URL地址，通過處理該URL返回的數(shù)據(jù)從而獲得autocomplete所需的數(shù)據(jù)；它還可以是一個回調(diào)函數(shù)，以便于完成一些復(fù)雜的數(shù)據(jù)處理。

現(xiàn)在，我們就使用最簡單的方式，給source屬性指定一個靜態(tài)的數(shù)組，來初步實現(xiàn)自動完成功能。

此時，使用瀏覽器訪問該html頁面就會發(fā)現(xiàn)，我們已經(jīng)完成的最基本的自動完成功能了。

使用autocomplete實現(xiàn)基本的自動完成功能

不過，有些時候我們希望列表顯示的文本和實際輸入的值并不一致。此時，我們?yōu)閟ource指定多個對象的數(shù)組，每個對象必須包含label和value屬性，label表示顯示的文本，value表示實際輸入的值(當(dāng)然它也可以包括其他屬性，你可以自行進行相關(guān)操作)。

$("#language").autocomplete({
    // 靜態(tài)的數(shù)據(jù)源，根據(jù)label屬性進行顯示或模糊匹配，當(dāng)給輸入框設(shè)置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 },    
    ]
});

// 最上面由多個字符串組成的數(shù)組，會被視為label和value值相同、均為該字符串的對象

更多的時候，我們希望該輸入框顯示的還是label屬性值，但還要給另外的元素(例如隱藏文本域)設(shè)置value屬性值，或者做一些其他處理。我們可以使用select事件來協(xié)助處理。

$("#language").autocomplete({
    // 靜態(tài)的數(shù)據(jù)源
    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指向當(dāng)前輸入框的DOM元素
        // event參數(shù)是事件對象
        // ui對象只有一個item屬性，對應(yīng)數(shù)據(jù)源中被選中的對象
        $(this).value = ui.item.label;
        $("#lang_id").val( ui.item.value );
        $("#sayHi").html( ui.item.sayHi );
        
        // 必須阻止事件的默認(rèn)行為，否則autocomplete默認(rèn)會把ui.item.value設(shè)為輸入框的value值
        event.preventDefault();     
    }
});

在實際應(yīng)用上，我們的數(shù)據(jù)源并不是一成不變的。大多數(shù)情況下，我們的數(shù)據(jù)都保存在數(shù)據(jù)庫中，此時，我們就需要使用autocomplete通過AJAX請求獲取遠(yuǎn)程數(shù)據(jù)作為數(shù)據(jù)源。

對應(yīng)的 ajax-actions.php 的服務(wù)器頁面代碼如下：

此時，我們再次訪問該頁面，我們?nèi)匀豢梢钥吹阶詣油瓿傻妮斎胄Ч?/p>

從遠(yuǎn)程服務(wù)器獲取數(shù)據(jù)的自動完成功能

注意：細(xì)心的讀者可能已經(jīng)注意到了，不管是從js數(shù)組中獲取數(shù)據(jù)，還是從后臺服務(wù)器獲取數(shù)據(jù)，我們的數(shù)據(jù)并沒有發(fā)生變化；但是，我們在從后臺獲取數(shù)據(jù)的頁面輸入"c"時，顯示了所有的數(shù)據(jù)項，而不是如之前一樣只顯示篩選過濾之后的"Chinese"和"French"。這是因為，當(dāng)我們從遠(yuǎn)程請求獲取數(shù)據(jù)時，Autocomplete認(rèn)為服務(wù)器已經(jīng)進行了過濾處理，返回的數(shù)據(jù)都是直接可用的，無需再過濾。

在發(fā)送AJAX請求時，Autocomplete會把當(dāng)前輸入框中的文字以默認(rèn)參數(shù)名term的形式追加到我們設(shè)置的URL地址后面。當(dāng)我們輸入一個c時，Autocomplete實際發(fā)送的請求路徑為/ajax-actions.php?term=c。

在上面的實例中，由于我們使用的是php數(shù)組來模擬服務(wù)器返回的數(shù)據(jù)，沒有根據(jù)用戶的輸入來返回對應(yīng)的數(shù)據(jù)，才會導(dǎo)致上述結(jié)果。如果在實際應(yīng)用中，使用類似如下SQL語句來查詢數(shù)據(jù)，則不會存在該問題。

<?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);
?>

此外，有些時候我們需要根據(jù)用戶的輸入或其他操作來構(gòu)造不同的請求URL，我們可以為source指定函數(shù)。Autocomplete將用戶輸入交給該函數(shù)，該函數(shù)可以進行任何處理，然后把通過任何方式獲得的數(shù)據(jù)交給Autocomplete處理即可。

$("#language").autocomplete({
    // 通過函數(shù)來獲取并處理數(shù)據(jù)源
    source: function(request, response){
        // request對象只有一個term屬性，對應(yīng)用戶輸入的文本
        // response是一個函數(shù)，在你自行處理并獲取數(shù)據(jù)后，將JSON數(shù)據(jù)交給該函數(shù)處理，以便于autocomplete根據(jù)數(shù)據(jù)顯示列表
        
        // 自行處理并獲取數(shù)據(jù)...
        var dataObj = [...]; // 表示處理后的JSON數(shù)據(jù)
        response(dataObj); // 最后將數(shù)據(jù)交給autocomplete去展示        
    }
});

在上面的講解中，我們介紹了autocomplete的必需參數(shù)選項source。除此之外，還有許多的參數(shù)選項可以給我們提供更加強大的其他輔助功能。