效果:
前台:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ftest.aspx.cs" Inherits="XML_Ftest" %>
<!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 type="text/javascript">
function setInfo() {
document.getElementById("TextBox1").value = "";
}
function getInfo() {
var info = document.getElementById("TextBox1").value;
if (info != "" && info != null) {
var datatable = XML_Ftest.Ftest(info).value;
if (info != "") {
document.getElementById("showInfo").style.display = "block";
var strHtml = "";
strHtml += '<table class="tableList" style ="border-collapse:collapse ; border-color:Gray ;" width="156px">';
for (var i = 0; i < datatable.Rows.length; i++) {
strHtml += ' <tr οnmοuseοver="mouseHander(\'over\',this)" οnmοuseοut="mouseHander(\'out\',this)" onClick=
tr_click("' + datatable.Rows[i].Name + '","' + datatable.Rows[i].id + '")>';
strHtml += ' <td>' + datatable.Rows[i]["Name"].toString() + '</td>';
strHtml += ' </tr>';
}
strHtml += ' </table>';
document.getElementById("showInfo").innerHTML = strHtml; //thedata是一个<div id="thedata"></div>中的thedata
}
}
else {
document.getElementById("showInfo").style.display = "none";
}
}
function mouseHander(type, th) {
if (type == "over") {
th.style.backgroundColor = "#EBF1FD";
th.style.color = "#E0572A";
th.style.cursor = "hand";
}
else {
th.style.backgroundColor = "#ffffff";
th.style.color = "#006666";
}
}
function tr_click(a, b) {
document.getElementById("TextBox1").value = a;
document.getElementById("ljghhid1").value = b;
document.getElementById("showInfo").style.display = "none";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="0" cellspacing="0" style="width: 95%">
<tr>
<td style="width: 100px; height: 17px">
<div id="div2" style="display: block">
<asp:TextBox ID="TextBox1" runat="server" Width="130px" onpropertychange="getInfo();"
value="输入文本" οnfοcus="setInfo();"></asp:TextBox></div>
<div id="showInfo" style="width: 156px; border: 0px solid #000000; position: absolute;
background-color: #FFFFFF; text-align: left; display: none; margin-left: 0px;
margin-top: 0px;">
</div>
</td>
<td>
<asp:Button ID="Button1" runat="server" Text="百度一下" />
</td>
</tr>
</table>
</div>
<asp:HiddenField ID="ljghhid1" runat="server" />
<asp:HiddenField ID="ljghhid2" runat="server" />
</form>
</body>
</html>
后台:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using AjaxPro;
public partial class XML_Ftest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(XML_Ftest));
}
[AjaxMethod]
public DataTable Ftest(string info) //返回虚拟数据
{
string inf = info; //接收文本框里的条件
DataTable dt = new DataTable(); //这个是假的数据,可以去数据库模糊查询%info%
dt.Columns.Add("id", Type.GetType("System.String"));
dt.Columns.Add("Name", Type.GetType("System.String"));
for (int i = 0; i < 10; i++)
{
DataRow dtr = dt.NewRow();
dtr["id"] = i.ToString();
dtr["Name"] = "F" + i.ToString();
dt.Rows.Add(dtr);
}
return dt; //返回带info的DataTable
}
}