您的位置：首页 > Web前端 > JavaScript

AJaxPro + JS 写的仿百度文本框智能关联提示(付图)。

2012-04-24 14:59 369 查看

效果：

前台：

<%@ 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 onmouseover="mouseHander(\'over\',this)" onmouseout="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="输入文本" onfocus="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

}

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航