就一个AJAX自动完成扩展的问题,搞了快1个月了,要疯了~救命!!
上个月做了一个小的类似于B2B的网站,总是觉得在产品查询和录入方便做的不太理想,于是想用AJAX的自动完成方式来做(像GOOGLE那样)。谁知道不用不知道,一用吓一跳,感觉是不错,可是N多的问题接踵而至。希望大家指导指导。谢谢。下面是我的页面代码
ASPX——————————————————————————
<%@ Page Language= "C# " AutoEventWireup= "true " CodeFile= "Default.aspx.cs " Inherits= "_Default " %>
<!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 runat= "server ">
<title> 无标题页 </title>
<script language= "javascript " type= "text/javascript " src= "lookup.js "> </script>
<script language= "jscript " type = "text/javascript ">
mainLoop = function()
{
val = escape(queryField.value);
if (lastVal != val)
{
var response =_Default.GetSearchItems(val);
showQueryDiv(response.value);
lastVal = val;
}
setTimeout( 'mainLoop() ', 100);
return true;
}
</script>
</head>
<body onload= "javascript:InitQueryCode( 'TextBox1 ') ">
<form id= "form1 " runat= "server ">
<div style= "text-align: center ">
<asp:TextBox ID= "TextBox1 " runat= "server " Width= "200px "> </asp:TextBox> <br />
<br />
<asp:Button ID= "Button1 " runat= "server " Text= "Button " /> <br />
<br />
<asp:TextBox ID= "TextBox2 " runat= "server "> </asp:TextBox> </div>
</form>
</body>
</html>
ASPX.CS————————————————————————————
using System;
using System.Data;
using System.Collections;
using System.ComponentModel;
using System.Configuration;
using System.Drawing;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using AjaxPro;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Utility.RegisterTypeForAjax(typeof(_Default));
}
[AjaxMethod()]
public ArrayList GetSearchItems(string D_PYM)
{
ArrayList items = new ArrayList();
if (D_PYM.Trim() == " ")
{
return items;
}
string conn = "server=localhost;uid=sa;pwd=;database=Test ";
SqlConnection SQL_Con = new SqlConnection(conn);
SqlCommand SQL_Com = new SqlCommand();
SQL_Com.Connection = SQL_Con;
SQL_Con.Close();
SQL_Con.Open();
string STR_Select_ProductInfo = "select ProductName from ProductInfo where PYM like ' " + D_PYM + "% ' ";
SQL_Com.CommandText = STR_Select_ProductInfo;
SqlDataReader dr = SQL_Com.ExecuteReader();
while (dr.Read())
{
items.Add(dr.GetString(0));
}
dr.Close();
return items;
}
}
_____________________________________________________________________________________________________________________________________
上面的代码测试是正常的,没有错误,产品名称列表也可能根据输入的信息进行显示,现在我想把上面的功能进行扩展一下:
1。如何让下拉列表中显示多列?现在下拉列表中只显示ProductName这个字段的内容,我还想增加ProductModel,ProductUnit等字段,如何实现?
2。在完成显示多列的前提下,如何把选中行中的其他字段赋给其他控件?如ProductName=TextBox1.Text;ProductModel=TextBox2.Text;ProductUnit=TextBox3.Text
3。如何把页面上其他控件的值传到AJAX中? 我发现AJAX声明下,所有的页面中控件不能其中使用,如我把其中的一段SQL代码改了一下,就不能使用 string STR_Select_ProductInfo = "select ProductName from ProductInfo where ProductModel= "+TextBox2.Text+ " and PYM like ' " + D_PYM + "% ' ";用全局变量也传不进去。如何把控件的值传进去?
4。当使用了AJAX下拉列表后,其页面中的所有控件的事件都不能激活了,按钮除外。非常郁闷。
头都大了~各位,救命
[解决办法]
我上传了份代码給你。
http://www.mytopwin.com/无刷新自动完成.rar
[解决办法]
UP
------解决方案--------------------
UP
[解决办法]
UP
[解决办法]
JF~
[解决办法]
為甚麼不用web service呢
[解决办法]
关注,帮顶,也想要你这样的功能。
[解决办法]
function autoCompleted(obj)
{
var tableID = document.getElementById( "myTable ");
var myLayer1 = document.getElementById( "Layer1 ");
//首先清除历史记录
if(tableID.rows.length != 0)
{
for(var a=0;a <tableID.rows.length;a++)
{
tableID.deleteRow();
}
}
if(obj.value != " ")
{
var pvalue = obj.value;
var webFileUrl = "AutoCompleted.aspx?searchID= " + pvalue;
var result = " ";
createXMLHttpRequest();
xmlHttp.open( "post ",webFileUrl,false);
xmlHttp.send( " ");
result = xmlHttp.responseText;
if(result != " ")
{
myLayer1.style.display = 'block ';
var myarray = result.split( ", ");
var newRow = null;
//创建表格填充数据
for(var i=1;i <myarray.length;i++)
{
newRow = tableID.insertRow();
newRow.id = "line " + i;
newRow.style.background = "white ";
newRow.height = "23 ";
td1 = newRow.insertCell();
td1.innerText = myarray[i];
newRow.attachEvent( "onmouseover ",onc1);
newRow.attachEvent( "onmouseout ",onc2);
newRow.attachEvent( "onclick ",onc3);
var myRow = document.getElementById( "line " + i);
}
}
}
else
{
myLayer1.style.display = 'none ';
}
}
[解决办法]
你也可以使用asp.net ajax。