我們遇到的最受歡迎的功能之一就是自動完成。許多人都使用過Intuit的Quicken之類的工具，並對其註冊表的功能很是著迷，它的註冊表能根據以前的註冊項填入資訊。這就使得資料輸入更快、更容易，而且不容易出錯。對於胖客戶應用，增加這個功能可能很容易，但是Web應用長期以來一直都沒有這個特性[1]。不過，Google在其beta實驗區推出Google Suggest後，證明了自動完成對於Web應用並非遙不可及。
Google Suggest實在讓人讚嘆不已（見圖4-16）。它不僅很好地放置了下拉區，還會在輸入框中自動插入最有可能的答案，並將非使用者鍵入的部分置灰，在下拉區中甚至還能使用向上和向下箭頭。由於為給定項提供了一些結果，使用者就能更清楚地認識到具體完成搜尋時可能會得到的結果。
許多網站都對Google Suggest做了剖析（可以在google上查Google Suggest！）。代碼清單4-17所示的例子比不上Google Suggest那麼豐富，但你確實能從中瞭解到利用Ajax可以做些什麼。需要注意，在這個例子中，callback()函數除了尋找一般的返回碼200，還會尋找返回碼204。204響應碼指示伺服器沒有發回任何資訊，利用個提示可以清空名字下拉區。你還會注意到，通過點記法為儲存格設定滑鼠事件，這一點在前面的“為什麼不能用setAttribute方法來設定Delete按鈕的事件處理常式？”旁註中已經解釋過。重申一次，使用calculateOffset()方法來確定應該把資料放在哪個位置。
圖4-16 Ajax為Google Suggest增色不少
代碼清單4-17 autoComplete.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax Auto Complete</title>
<style type="text/css">
.mouseOut {
background: #708090;
color: #FFFAFA;
}
.mouseOver {
background: #FFFAFA;
color: #000000;
}
</style>
<script type="text/javascript">
var xmlHttp;
var completeDiv;
var inputField;
var nameTable;
var nameTableBody;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function initVars() {
inputField = document.getElementById("names");
nameTable = document.getElementById("name_table");
completeDiv = document.getElementById("popup");
nameTableBody = document.getElementById("name_table_body");
}
function findNames() {
initVars();
if (inputField.value.length > 0) {
createXMLHttpRequest();
var url = "AutoCompleteServlet?names=" + escape(inputField.value);
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
} else {
clearNames();
}
}
function callback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var name =
xmlHttp.responseXML
.getElementsByTagName("name")[0].firstChild.data;
setNames(xmlHttp.responseXML.getElementsByTagName("name"));
} else if (xmlHttp.status == 204){
clearNames();
}
}
}
function setNames(the_names) {
clearNames();
var size = the_names.length;
setOffsets();
var row, cell, txtNode;
for (var i = 0; i < size; i++) {
var nextNode = the_names[i].firstChild.data;
row = document.createElement("tr");
cell = document.createElement("td");
cell.onmouseout = function() {this.className='mouseOver';};
cell.onmouseover = function() {this.className='mouseOut';};
cell.setAttribute("bgcolor", "#FFFAFA");
cell.setAttribute("border", "0");
cell.onclick = function() { populateName(this); } ;
txtNode = document.createTextNode(nextNode);
cell.appendChild(txtNode);
row.appendChild(cell);
nameTableBody.appendChild(row);
}
}
function setOffsets() {
var end = inputField.offsetWidth;
var left = calculateOffsetLeft(inputField);
var top = calculateOffsetTop(inputField) + inputField.offsetHeight;
completeDiv.style.border = "black 1px solid";
completeDiv.style.left = left + "px";
completeDiv.style.top = top + "px";
nameTable.style.width = end + "px";
}
function calculateOffsetLeft(field) {
return calculateOffset(field, "offsetLeft");
}
function calculateOffsetTop(field) {
return calculateOffset(field, "offsetTop");
}
function calculateOffset(field, attr) {
var offset = 0;
while(field) {
offset += field[attr];
field = field.offsetParent;
}
return offset;
}
function populateName(cell) {
inputField.value = cell.firstChild.nodeValue;
clearNames();
}
function clearNames() {
var ind = nameTableBody.childNodes.length;
for (var i = ind - 1; i >= 0 ; i--) {
nameTableBody.removeChild(nameTableBody.childNodes[i]);
}
completeDiv.style.border = "none";
}
</script>
</head>
<body>
<h1>Ajax Auto Complete Example</h1>
Names: <input type="text" size="20" id="names"
onkeyup="findNames();" style="height:20;"/>
<div style="position:absolute;" id="popup">
<table id="name_table" bgcolor="#FFFAFA" border="0"
cellspacing="0" cellpadding="0"/>
<tbody id="name_table_body"></tbody>
</table>
</div>
</body>
</html>
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
