jQuery UI Autocomplete類似百度、谷歌輸入框的自動填充文本域

jQuery UI 1.8版本新增瞭2個非常有用的控件:一個是Button,其作用是自定義頁面按鈕的樣式;另一個就是Autocomplete,其作用是使文本框具有類似百度、谷歌輸入框那種自動填充的能力。

 

Autocomplete的函數原型如下:

[javascript]
$(selector).autocomplete({ 
    source: [], // 自動填充的備選數據,註1 
    position: {my: "left top", at: "left bottom"}, // 下拉列表相對於文本框的位置,註2 
    minLength: 1, // 自動填充被激活前需要輸入的最小字符數,默認為1 
    delay: 300, // 停止輸入到自動填充被激活的延遲時間,默認為300 
    autoFocus: false, // 是否自動聚焦於下拉列表第一項,默認為false 
    appendTo: "body", // 自動填充的下拉列表放到哪個元素內部,註3 
    disabled: false, // 是否禁用自動填充,默認為false 
    create: function(event, ui) {}, // 自動填充被創建時被觸發 
    search: function(event, ui) {}, // 在達到最小輸入字符數並且延遲時間結束之後,自動填充數據請求開始之前被觸發 
    open: function(event, ui) {}, // 下拉列表打開時被觸發 
    focus: function(event, ui) {}, // 下拉列表項被聚焦時觸發,ui.item對應被聚焦的列表項 
    select: function(event, ui) {}, // 下拉列表項被選擇時觸發,ui.item對應被選擇的列表項 
    close: function(event, ui) {}, // 下拉列表隱藏時被觸發 
    change: function(event, ui) {} // 文本域的值發生改變時被觸發,ui.item對應新的被選擇的列表項 
}); 

其中,Autocomplete作用的元素一般是<input type=”text”>或者<textarea>這些帶輸入框的標簽。

註釋:

註1,source是Autocomplete核心屬性,表示自動填充時所需的備選數據集合,必填,其它的屬性和事件都是非必需的。

source的可選值有三種類型:

一是Array型,可以是形如[“Java”, “JavaScript”, “CSS”, “jQuery”, “PHP”, “HTML”] 的一元字符串數組,也可以是形如 {{label: “choice1”, value: “value1”}, {label: “choice2”, value: “value2”},…} 的二元字符串數組。

二是String型,表示能返回形如上述兩種數組格式的JSON數據的URL鏈接。

三是function型,其函數原型是function(request, response) ,其中:參數request表示數據請求,它隻有唯一的屬性term,request.term表示當前文本框中的輸入值;參數response表示數據響應,它是一個已經定義好的回調函數,需要在本function的函數體中傳入參數作為調用,response的參數必須是符合前述兩種數組格式的數組數據。

註2, position表示的是下拉菜單相對於文本輸入框的位置,其格式符合jQuery UI Position規則。通常來說隻用到my和at兩個索引,即形如{my: "left top", at: "left bottom"}。其中my表示下拉菜單,my: “lefttop” 表示下拉菜單的左上角;at表示在輸入框的什麼位置,at: “left bottom” 表示在輸入框的左下角。

註3,appendTo表示數據響應時出現的下拉列表是被添加到哪個元素的內部,其值是滿足jQuery選擇器的字符串,如”#id”、”.class” 等。默認為”body”,即<body>元素的jQuery對象。不過通常這個元素無需設置,使用默認值即可。

另外,Autocomplete的7個可選事件的參數都是event和ui:event表示事件對象,與其它諸如click、select等事件中的event差別不大;ui表示的是下拉列表這種控件的DOM對象,ui.item表示列表項,ui.item.value表示列表項的值,基本隻在focus、select、change事件中會被用到。

 

下面的代碼結合Autocomplete和Ajax模擬瞭一個異步查詢姓名的自動填充輸入域:

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Test Autocomplete</title> 
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />  
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $("#auto").autocomplete({ 
        source: function(request, response) { 
            $.ajax({ 
                url: "http://localhost/phptest/index.php", 
                data: { 
                    name: request.term 
                }, 
                dataType: "json", 
                success: function(data, textStatus, jqXHR) { 
                    response($.map(data, function(item, index) { 
                        return item.name; 
                    })); 
                } 
            }); 
        }, 
        delay: 600, 
        select: function(event, ui) { 
            $(".result").remove(); 
            $("#auto").before("<p class='result'></p>"); 
            $(".result").html(ui.item.value); 
        } 
    }); 
}); 
</script> 
</head> 
 
<body> 
<input type="text" id="auto" /> 
</body> 
</html> 
其中Ajax的url:http://localhost/phptest/index.php是本地一個返回json格式的姓名數組的測試文件。

需要註意的是按照jQuery UI的格式,需要導入三個文件,即:

[html]
<link type="text/css"href="css/ui-lightness/jquery-ui-1.8.18.custom.css"rel="stylesheet" />      
<script type="text/javascript"src="js/jquery-1.7.1.min.js"></script> 
<script type="text/javascript"src="js/jquery-ui-1.8.18.custom.min.js"></script> 

另外代碼中用到的$.map 函數也是一個很有用的數組生成/裝配函數。

 

作者 sadfishsc

發佈留言