AutoComplete控件就是在使用者在文本框輸入前幾個字母或是漢字的時候,能從存放資料的文本或是資料庫裡将所有以這些字母開頭的資料提示給使用者。
如百度搜尋下輸入'a'時的提示：
其實我們也可以很友善的實作，autocomplete就是實作該功能的利器：
官網：http://jqueryui.com/demos/autocomplete/
autocomplete需要的資料源可以為：本地資料和遠端資料
本地資料源為本地js數組或本地的json對象，如：
var data = ["c++","java", "php", "coldfusion","javascript"];
var data = [{text:'Link A', url:'/page1'}, {text:'Link B', url: '/page2'} ];
在使用遠端位址時，它預設傳入的參數是：q（輸入值），limit（傳回結果的最大值），可以使用extraParams傳入其他的參數，而且遠端資料源是需要固定格式的資料，傳回結果：使用“\n”分割每行資料，每行資料中使用“|”分割每個元素，如：
string data = "c++\n java \n php \n coldfusion \n javascript";
一個最簡單的Autocomplete（自動完成）代碼片段：
<!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>無标題文檔</title>
<link rel="stylesheet" href="jquery.autocomplete.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<script type="text/javascript">
var websites = [
"Google","NetEase", "Sohu", "Sina", "Sogou", "我愛北京", "Tencent",
"Taobao", "Tom", "Yahoo", "JavaEye", "Csdn", "Alipay"
];
$().ready(function() {
$("#website").autocomplete(websites,{});
});
</script>
</head>
<body>
<p>
<label>Web Site:</label>
<input type="text" id="website" />
<input type="button" id="getvalue" value="Get Value" />
</p>
</body>
</html>
從代碼中我們隻需在前端引入：
<link rel="stylesheet" href="jquery.autocomplete.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
三行。
然後為指定輸入框提供查詢資料即可：
$("#website").autocomplete(websites,{});
我們還可以根據實際情況添加可選項：
$("#website").autocomplete(websites,{
max: 12, //清單裡的條目數
width: 400, //提示的寬度，溢出隐藏
scrollHeight: 300, //提示的高度，溢出顯示滾動條
matchContains: true, //包含比對，就是data參數裡的資料，是否隻要包含文本框裡的資料就顯示
autoFill: false, //是否自動填充
});
以上參數基本可滿足我們的需求了。
另：
附件提供了DEMO，大家可體驗下。
![用js實作的一個加載中狀态的動态效果[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)