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

最新推荐文章于 2024-08-27 23:43:03 发布

阿尔法狼

最新推荐文章于 2024-08-27 23:43:03 发布

阅读量1.6k

点赞数

分类专栏： HTML JavaScript C# ASP.NET 文章标签：百度 textbox server function asp button

本文链接：https://blog.csdn.net/namespacefeng/article/details/7493788

版权

ASP.NET 同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

JavaScript

7 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

效果：

前台：

<%@ 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
    }

}

阿尔法狼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJaxPro + JS 写的仿百度文本框智能关联提示(付图)。

效果：前台：http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> function setInfo() { document.getElementById("TextBox1").val
复制链接

扫一扫

专栏目录