jQuery实现suggest效果
软件环境：
jquery-1.2.js
vs 2003
ASP.NET
关键是把参数传递到服务器端，取得查询结果后，如何回调回来。为了简单起见，我先使用了$.ajax方法
，保证数据能够成功返回。
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){ alert( "Data Saved: " + msg ); }
});
然后采用xml进行数据传递，这里困难的是保证xml传递和解析的正确。为了检验正确性，我先试了一下本地xml文件是否能解析成功(略)。
详细实现，参考以下：
AutoSug.aspx-----文本框键入查询关键字，列出返回结果后可点击键入文本框
Query.aspx------后台数据库查询数据
js/AutoSug.js----jquery处理代码
AutoSug.aspx
<%@ Page language="c#" Codebehind="AutoSug.aspx.cs" AutoEventWireup="false"
Inherits="JC.AutoSug" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>AutoSug</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<LINK href="meiyun.css" type="text/css" rel="stylesheet">
<script src="js/jquery-1.2.js" type="text/javascript"></script>
<script src="js/AutoSug.js" type="text/javascript"></script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="get" runat="server">
<INPUT id="tx1" style="Z-INDEX: 101; LEFT: 376px; WIDTH: 184px;
POSITION: absolute; TOP: 168px; HEIGHT: 32px"
type="text" size="25">
<DIV id="div1"></DIV>
</form>
</body>
</HTML>
Query.aspx
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Data.OracleClient;
namespace JC
{
/// <summary>
/// Query 的摘要说明。
/// </summary>
public class Query : System.Web.UI.Page
{
private void Page_Load(object sender, System.EventArgs e)
{
//获得前一个页面的文本框内容
string str=Request.Form["tx1"];
string array1="";
//查询数据库获得数据
string
connString="server=wuliu;UID=meiyun;Password=meiyun;";
OracleConnection conn=new OracleConnection(connString);
string sql="SELECT count(*) FROM YT_YSQY WHERE Y_QYMC LIKE
'"+str+"%'";
string selectClause="SELECT distinct Y_QYMC FROM YT_YSQY
WHERE Y_QYMC LIKE '"+str+"%'";
conn.Open();
OracleCommand command=new OracleCommand(sql,conn);
OracleDataReader odr=command.ExecuteReader();
while(odr.Read())
{
//如果记录条数大于100条，不返回，太多记录会影响性能
if(odr.GetInt32(0)>100)
return;
}
command=new OracleCommand(selectClause,conn);
odr=command.ExecuteReader();
//把查询数据写成一下形式
array1="<?xml version='1.0' encoding='gb2312'?><DATA_ROOT>";
while(odr.Read())
{
array1+="<DATA_ROW>"+odr.GetValue(0).ToString()
+"</DATA_ROW>";
}
array1+="</DATA_ROOT>";
Response.ContentType="text/xml";
Response.Write(array1);
Response.End();
}
}
}
js/AutoSug.js
$(document).ready(function() {
//回调
$("#tx1").keydown(function() {
$.ajax({
url:"Query.aspx", //要将请求发送到的URL地址
type:"POST", //发送方式
dataType:"xml", //期望从服务器端返回的数据类型
timeout:2000,
data:"tx1="+escape($('#tx1').val()), //传递的参数
success: function(xml) { //返回的数据
//创建一个data_set容器,来盛放下面循环的row元素
var data_set=document.createElement('data_set');
$(xml).find('DATA_ROW').each(function(){
var name_text = $(this).text();
var row= document.createElement("row"); //
创建一个row元素，用于绑定上面动态生成的data_set下面
$(row).html(name_text+"<br>"); //把row转换
为jquery对象。
$(data_set).append($(row)); // 绑定row到
data_set
}); //end each
//查询结果显示在页面
//设置div1属性
var pos=$("#tx1").offset();
$("#div1").css
({position:"absolute",left:pos.left,top:pos.top+32});
$("#div1").width($("#tx1").width());
$("#div1").addClass("div_style");
$("#div1").html(data_set);
//选中显示
$("#div1").find("row").each(
function(i){
$(this).hover(
function() {
$(this).addClass("hover_color");
},
function() {
$(this).removeClass("hover_color");
});
});//end each
//单击添入文本框内容
$("#div1").find("row").click(function() {
$("#tx1").val($(this).text());
//清除对象
$("#div1").html("");
//$("#div1").addClass("div_style1");
});
},//end success
error:function(){
$("#div1").html("");
//$("#div1").addClass("div_style1");
}//end error
});//end ajax
});//end tx1.keyup
});//end document
jquery-1.2.js
vs 2003
ASP.NET
关键是把参数传递到服务器端，取得查询结果后，如何回调回来。为了简单起见，我先使用了$.ajax方法
，保证数据能够成功返回。
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){ alert( "Data Saved: " + msg ); }
});
然后采用xml进行数据传递，这里困难的是保证xml传递和解析的正确。为了检验正确性，我先试了一下本地xml文件是否能解析成功(略)。
详细实现，参考以下：
AutoSug.aspx-----文本框键入查询关键字，列出返回结果后可点击键入文本框
Query.aspx------后台数据库查询数据
js/AutoSug.js----jquery处理代码
AutoSug.aspx
<%@ Page language="c#" Codebehind="AutoSug.aspx.cs" AutoEventWireup="false"
Inherits="JC.AutoSug" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>AutoSug</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<LINK href="meiyun.css" type="text/css" rel="stylesheet">
<script src="js/jquery-1.2.js" type="text/javascript"></script>
<script src="js/AutoSug.js" type="text/javascript"></script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="get" runat="server">
<INPUT id="tx1" style="Z-INDEX: 101; LEFT: 376px; WIDTH: 184px;
POSITION: absolute; TOP: 168px; HEIGHT: 32px"
type="text" size="25">
<DIV id="div1"></DIV>
</form>
</body>
</HTML>
Query.aspx
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Data.OracleClient;
namespace JC
{
/// <summary>
/// Query 的摘要说明。
/// </summary>
public class Query : System.Web.UI.Page
{
private void Page_Load(object sender, System.EventArgs e)
{
//获得前一个页面的文本框内容
string str=Request.Form["tx1"];
string array1="";
//查询数据库获得数据
string
connString="server=wuliu;UID=meiyun;Password=meiyun;";
OracleConnection conn=new OracleConnection(connString);
string sql="SELECT count(*) FROM YT_YSQY WHERE Y_QYMC LIKE
'"+str+"%'";
string selectClause="SELECT distinct Y_QYMC FROM YT_YSQY
WHERE Y_QYMC LIKE '"+str+"%'";
conn.Open();
OracleCommand command=new OracleCommand(sql,conn);
OracleDataReader odr=command.ExecuteReader();
while(odr.Read())
{
//如果记录条数大于100条，不返回，太多记录会影响性能
if(odr.GetInt32(0)>100)
return;
}
command=new OracleCommand(selectClause,conn);
odr=command.ExecuteReader();
//把查询数据写成一下形式
array1="<?xml version='1.0' encoding='gb2312'?><DATA_ROOT>";
while(odr.Read())
{
array1+="<DATA_ROW>"+odr.GetValue(0).ToString()
+"</DATA_ROW>";
}
array1+="</DATA_ROOT>";
Response.ContentType="text/xml";
Response.Write(array1);
Response.End();
}
}
}
js/AutoSug.js
$(document).ready(function() {
//回调
$("#tx1").keydown(function() {
$.ajax({
url:"Query.aspx", //要将请求发送到的URL地址
type:"POST", //发送方式
dataType:"xml", //期望从服务器端返回的数据类型
timeout:2000,
data:"tx1="+escape($('#tx1').val()), //传递的参数
success: function(xml) { //返回的数据
//创建一个data_set容器,来盛放下面循环的row元素
var data_set=document.createElement('data_set');
$(xml).find('DATA_ROW').each(function(){
var name_text = $(this).text();
var row= document.createElement("row"); //
创建一个row元素，用于绑定上面动态生成的data_set下面
$(row).html(name_text+"<br>"); //把row转换
为jquery对象。
$(data_set).append($(row)); // 绑定row到
data_set
}); //end each
//查询结果显示在页面
//设置div1属性
var pos=$("#tx1").offset();
$("#div1").css
({position:"absolute",left:pos.left,top:pos.top+32});
$("#div1").width($("#tx1").width());
$("#div1").addClass("div_style");
$("#div1").html(data_set);
//选中显示
$("#div1").find("row").each(
function(i){
$(this).hover(
function() {
$(this).addClass("hover_color");
},
function() {
$(this).removeClass("hover_color");
});
});//end each
//单击添入文本框内容
$("#div1").find("row").click(function() {
$("#tx1").val($(this).text());
//清除对象
$("#div1").html("");
//$("#div1").addClass("div_style1");
});
},//end success
error:function(){
$("#div1").html("");
//$("#div1").addClass("div_style1");
}//end error
});//end ajax
});//end tx1.keyup
});//end document
浙公网安备 33010602011771号