快捷導(dǎo)航

javascript 異步頁面查詢實現(xiàn)代碼(asp.net)

更新時間：2010年05月26日 22:02:40 作者：

異步頁面查詢，其實與自動完成時一樣的原理，根據(jù)用戶輸入的關(guān)鍵詞自動的與數(shù)據(jù)庫中的匹配，并顯示出來，提高用戶體驗，但主要搜索量大的話，增加服務(wù)器開銷。

1。 testlist.aspx頁面：

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<link rel="stylesheet" href="jscript/autoSuggest.css" type="text/css"/> 
<link rel="stylesheet" href="jscript/ac.css" type="text/css"/> 
<script language="Javascript" src="jscript/autoSuggest.js"></script> 
<script language="Javascript" src="jscript/ac.js"></script> 
function ACClient( queryurl, width, objInput, objLable ) 
{ 
this.xmldom = getXmlhttp(); 
this.queryurl = queryurl; 
this.prolist = new Array(); 
this.divwidth = width; 
this.objInput = objInput; 
this.getEligible = function(ac) { 
var eligible = new Array(); 
if (ac.inputText.length < 1) { 
document.getElementById(objInput.name).value = ""; 
document.getElementById(objLable.name).value = ""; 
return eligible; 
} 
var strURL = this.queryurl + escape(ac.inputText) + "&rand=" + Math.random(); 
this.xmldom.open("GET", strURL, false); 
try { 
this.xmldom.send(); 
} 
catch (e) { 
return; 
} 
this.prolist = this.xmldom.responseXML.documentElement.selectNodes("/duxion/object"); 
if (0 == this.prolist.length) { 
return eligible; 
} 
for (var i = 0; i < this.prolist.length; i++) { 
if (i > 15) 
break; 
var node = this.prolist.item(i); 
eligible[eligible.length] = node.getAttribute("fullcontent"); 
} 
ac.div.style.width = this.divwidth; 
return eligible; 
}; 
this.useSuggestion = function( sel ) 
{ 
if( sel>=0 ) 
{ 
var node = this.prolist.item(sel); 
if(typeof(node.getAttribute( "value" )) != "undefined") 
document.getElementById(objInput.name).value = node.getAttribute( "value" ); 
else 
document.getElementById(objInput.name).value = ""; 
if(typeof(node.getAttribute( "content" )) != "undefined") 
document.getElementById(objLable.name).value = node.getAttribute( "content" ); 
else 
document.getElementById(objLable.name).value = ""; 
if (this.objInput.name == "hidfreq_code") { 
document.getElementById("txtfreq_name").value = node.getAttribute("Name"); 
document.getElementById("hidfreq_code").value = node.getAttribute("Code"); 
} 
} 
}; 
return this; 
} 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<%--div 用于顯示下拉查詢部分--%> 
<div id="autosuggest" style="width:160px;font-size:12px;"><ul></ul></div> 
<div> 
<asp:TextBox ID="txtfreq_name" CssClass="needtext" runat="server" Width="100px"></asp:TextBox><asp:HiddenField 
ID="hidfreq_code" runat="server" /> 
</div> 
</form> 
</body> 
</html> 
<script type="text/javascript"> 
new AutoSuggest(document.getElementById('txtfreq_name'), 
new ACClient("testXml.aspx?tag=yp_frequency&value=", "200px", document.getElementById('hidfreq_code'), document.getElementById('txtfreq_name'))); 
</script> 

2。供查詢的xml的testxml.aspx.cs文件

復(fù)制代碼代碼如下:

 
public partial class testXml : BaseForm 
{ 
protected void Page_Load(object sender, EventArgs e) 
{ 
ListXmlData(); 
} 
private string[] arrwidth; 
private string[] arrfield; 
public string fieldlist = "區(qū)域Id,區(qū)域名,區(qū)域編碼,區(qū)域?qū)哟?; 
public string coloumwidth = "60,10,20,30"; 
//顯示xml格式數(shù)據(jù) 
private void ListXmlData() 
{ 
//各字段的寬度 
string strwhere=""; 
if (Request["value"] != null) 
{ 
strwhere = string.Format(" and Code like '{0}%'", Request["value"].ToString()); 
} 
arrfield = fieldlist.Split(','); 
arrwidth = coloumwidth.Split(','); 
DataTable dtList = new Districts().Search("1=1" + strwhere);// dis // SqlHelper.GetTable(subsys_db, CommandType.Text, strsql, null); 
int list_cols = dtList.Columns.Count; //字段數(shù) 
int list_rows = dtList.Rows.Count; //記錄數(shù) 
string listlable = ""; //顯示內(nèi)容 
XmlDocument xmldoc = new XmlDocument(); 
XmlDeclaration dec = xmldoc.CreateXmlDeclaration("1.0", "gb2312", null); 
xmldoc.InsertBefore(dec, xmldoc.FirstChild); 
XmlElement root = xmldoc.CreateElement("duxion"); 
xmldoc.AppendChild(root); 
//顯示表頭 
if (list_rows > 0) 
{ 
XmlElement objtitle = xmldoc.CreateElement("object"); 
for (int k = 0; k < list_cols; k++) 
{ 
listlable += "<span style='width:" + arrwidth[k] + ";text-align:center;font-weight:bold;color:#000000;padding-top:2px;'>" + arrfield[k] + "</span>"; 
if (k == arrfield.Length - 1) 
break; 
} 
objtitle.SetAttribute("fullcontent", listlable); 
root.AppendChild(objtitle); 
} 
//顯示表頭 
//顯示數(shù)據(jù) 
for (int i = 0; i < list_rows; i++) 
{ 
listlable = ""; 
DataRow drList = dtList.Rows[i]; 
XmlElement obj = xmldoc.CreateElement("object"); 
for (int j = 0; j < list_cols; j++) 
{ 
obj.SetAttribute(dtList.Columns[j].ColumnName, drList[j].ToString()); 
if (j <= arrfield.Length - 1) 
{ 
//listlable += "<span style='width:" + arrwidth[j] + "'>" + GetLeftString(drList[j].ToString(), Convert.ToInt16(arrwidth[j])) + "</span>"; 
listlable += "<span style='width:" + arrwidth[j] + "'>" + formatXmlNode(dtList.Columns[j].DataType.ToString(), drList[j].ToString()) + "</span>"; 
} 
} 
obj.SetAttribute("fullcontent", listlable); 
root.AppendChild(obj); 
} 
//顯示數(shù)據(jù) 
//Response.ContentType = "text/xml;charset=utf-8"; 
//Response.ContentType = "text/xml;charset=gb2312"; 
Response.ContentEncoding = System.Text.Encoding.Default; 
Response.ContentType = "text/xml"; 
Response.Clear(); 
Response.Write(xmldoc.OuterXml); 
Response.End(); 
} 
private string formatXmlNode(string field_type, string field_value) 
{ 
string return_value = field_value.Trim(); 
switch (field_type) 
{ 
case "System.Double": 
case "System.Decimal": 
return_value = string.Format("{0:0.###}", Convert.ToDouble(return_value)); 
break; 
} 
return return_value; 
} 
} 

3.效果圖：

4。另外的.js以及.css文件見附件

您可能感興趣的文章:

相關(guān)文章

JS Web Flex彈性盒子模型代碼實例
這篇文章主要介紹了JS Web Flex彈性盒子模型代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-03-03
常規(guī)表格多表頭查詢示例
這篇文章主要介紹了常規(guī)表格多表頭查詢,需要的朋友可以參考下
2014-02-02
可以檢驗雙色球是否中獎的js
2008-04-04

二叉樹先序遍歷的非遞歸算法具體實現(xiàn)

這篇文章主要介紹了二叉樹先序遍歷的非遞歸算法，有需要的朋友可以參考一下

2014-01-01

JavaScript實現(xiàn)仿淘寶商品購買數(shù)量的增減效果

最近接了個項目，要開發(fā)一個地方的O2O租書項目，使用的是asp.net mvc技術(shù)，其中咋圖書詳情頁，用戶可以輸入借閱的數(shù)量，器實現(xiàn)此功能的方法是使用了js來控制數(shù)量的增減和校驗，對js實現(xiàn)商品數(shù)量的增減功能感興趣的朋友一起學(xué)習(xí)吧

2016-01-01

BootstrapValidator不觸發(fā)校驗的實現(xiàn)代碼

BootstrapValidator是基于bootstrap3的jquery表單驗證插件，是最適合bootstrap框架的表單驗證插件，本文給大家介紹BootstrapValidator不觸發(fā)校驗的實現(xiàn)代碼，感興趣的朋友一起看看吧

2016-09-09

js怎么只刷新當(dāng)前頁面一次

Javascript刷新頁面的幾種方法：location.reload()、location.replace(location)、history.go(0)、location=location、location.assign(location)、document.execCommand('Refresh')、window.navigate(location)、document.URL=location.href,js怎么只刷新當(dāng)前頁面一次呢

2023-09-09