Anthem库的Google Suggest 实现

触发事件：

onkeyup="LoadResults(this.value)"

客户端js主体：

//两种形式显示容器 function ShowDiv(divid) { if (document.layers) {document.layers[divid].visibility="show";} else {document.getElementById(divid).style.visibility="visible";} } //两种形式隐藏容器 function HideDiv(divid) { if (document.layers) {document.layers[divid].visibility="hide";} else {document.getElementById(divid).style.visibility="hidden";} } //页面加载时发生 function BodyLoad() { HideDiv("searchresults"); document.form1.keyword.focus(); } function ClearResults() { // 清除容器中所有行子项 var resultsdiv = document.getElementById("searchresults"); var counter = resultsdiv.childNodes.length; for (var i = counter -1; i >= 0; i--) { resultsdiv.removeChild(resultsdiv.childNodes[i]); } } function LoadResults(searchterm) { if (searchterm.length == 0) { ClearResults(); HideDiv("searchresults"); return; } // Anthem异步异步调用服务器端RetrieveRows方法 Anthem_InvokePageMethod('RetrieveRows',[searchterm] , LoadResultsCallback); } //回调函数处理 function LoadResultsCallback(result) { ShowDiv("searchresults"); ClearResults(); // 获取ajax调用的回调结果 var items = result.value; var count = items.Rows.length; //返回为DataTable对象时 var count = items.Tables.stores.Rows.length;//返回为DataSet对象时 var count = items.length; //返回为定制对象object时 // 创建DOM的表对象 var divResults = document.getElementById("searchresults"); //显示容器 var tblTable = document.createElement("table"); //表格 var tablebody = document.createElement("tbody");//表主体 var tablerow, tablecell, tablenode; // 迭代出每一行 for (var i = 0; i < count; i++) { var currenttext = items.Rows[i].Name; //返回为DataTable对象时 var currenttext = items.Tables.stores.Rows[i].Name; //返回为DataSet对象时 var currenttext = items[i].Name;//返回为定制对象object时 tablerow = document.createElement("tr"); //表格行 tablecell = document.createElement("td");//表格单元格 // 构建单元属性和函数 tablecell.onmouseover = function(){this.className='mouseOver';}; tablecell.onmouseout = function(){this.className='mouseOut';}; tablecell.setAttribute("border", "0");//设置样式属性 tablecell.onclick = function(){ReplaceInput(this);};//替换处理 tablenode = document.createTextNode(currenttext); //文本节点 tablecell.appendChild(tablenode); tablerow.appendChild(tablecell); tablebody.appendChild(tablerow); } // 添加表格主体到表格中 tblTable.appendChild(tablebody); // 添加表格到容器中 divResults.appendChild(tblTable); } function ReplaceInput(tablecell) { var inputbox = document.getElementById("keyword"); inputbox.value = tablecell.firstChild.nodeValue;//单元格文本值 ClearResults(); HideDiv("searchresults"); }

服务器端主体：

//服务器端三中不同类型对象的返回 [Anthem.Method] public DataTable RetrieveRows(string searchterm) { DataTable dtReturn = new DataTable(); //....... SqlDataAdapter adpt = new SqlDataAdapter(cmd); adpt.Fill(dtReturn); return dtReturn; } [Anthem.Method] public DataTable RetrieveRows(string searchterm) { SqlDataAdapter adpt = new SqlDataAdapter(cmd); DataSet dsCustomers = new DataSet(); adpt.Fill(dsCustomers, "stores"); // ... return dsCustomers; } [Anthem.Method] public StoreCollection RetrieveRows(string searchterm) { //........ DataTable dtReturn = new DataTable(); //........ SqlDataAdapter adpt = new SqlDataAdapter(cmd); adpt.Fill(dtReturn); StoreCollection strCollection = new StoreCollection(); for (int i = 0; i < dtReturn.Rows.Count; i++) { Store stre = new Store(); stre.Name = (string)dtReturn.Rows[i]["Name"]; strCollection.Add(stre); } return strCollection; }