asp.net 文本框输入时的自动完成

最新推荐文章于 2021-08-06 12:11:29 发布

weixin_33743703

最新推荐文章于 2021-08-06 12:11:29 发布

阅读量159

点赞数

文章标签： xhtml ui c#

本文以http://hi.baidu.com/kb81/blog/item/6f7e040848be85d162d98634.html相关内容为基础

Default.aspx

Code
<%@ 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 type="text/javascript" language="javascript">
        var XMLHttpReq;
        var completeDiv;
        var inputField;
        var completeTable;
        var completeBody;
        //创建XMLHttpRequest对象
        function createXMLHttpRequest() {
            if (window.XMLHttpRequest) { //Mozilla 浏览器
                XMLHttpReq = new XMLHttpRequest();
            }
            else if (window.ActiveXObject) { // IE浏览器
                try {
                    XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    try {
                        XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) { }
                }
            }
        }

        //发送匹配请求函数
        function findNames() {
            inputField = document.getElementById("names");
            completeTable = document.getElementById("complete_table");
            completeDiv = document.getElementById("popup");
            completeBody = document.getElementById("complete_body");
            if (inputField.value.length > 0) {
                createXMLHttpRequest();
                var url = "Default2.aspx?names=" + escape(inputField.value);    //
                XMLHttpReq.open("GET", url, true);
                XMLHttpReq.onreadystatechange = processMatchResponse; //指定响应函数
                XMLHttpReq.send(null); // 发送请求
            } else {
                clearNames();
            }
        }

        // 处理返回匹配信息函数
        function processMatchResponse() {
            if (XMLHttpReq.readyState == 4) { // 判断对象状态
                if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
                    setNames(XMLHttpReq.responseXML.getElementsByTagName("res"));
                } else { //页面不正常
                    window.alert("您所请求的页面有异常。");
                }
            }
        }

        //生成与输入内容匹配行
        function setNames(names) {

            clearNames();
            var size = names.length;

            setOffsets();
            var row, cell, txtNode;
            for (var i = 0; i < size; i++) {
                var nextNode = names[i].firstChild.data;
                row = document.createElement("tr");
                cell = document.createElement("td");
                cell.onmouseout = function() {
                    this.className = 'mouseOver';
                };
                cell.onmouseover = function() {
                    this.className = 'mouseOut';
                };
                cell.setAttribute("bgcolor", "#ffddcc");
                cell.setAttribute("border", "0");
                cell.onclick = function() {
                    completeField(this);
                };
                txtNode = document.createTextNode(nextNode);
                cell.appendChild(txtNode);
                row.appendChild(cell);
                completeBody.appendChild(row);
            }
        }

        //设置显示位置
        function setOffsets() {
            completeTable.style.width = "auto";    //显示自动完成的提示框宽度自动伸展或缩小
            var left = calculateOffset(inputField, "offsetLeft");
            var top = calculateOffset(inputField, "offsetTop") + inputField.offsetHeight;
            completeDiv.style.border = "black 1px solid";
            completeDiv.style.left = left + "px";
            completeDiv.style.top = top + "px";
        }

        //计算显示位置
        function calculateOffset(field, attr) {
            var offset = 0;
            while (field) {
                offset += field[attr];
                field = field.offsetParent;
            }
            return offset;
        }

        //填写输入框
        function completeField(cell) {
            inputField.value = cell.firstChild.nodeValue;
            clearNames();
        }

        //清除自动完成行
        function clearNames() {
            var ind = completeBody.childNodes.length;
            for (var i = ind - 1; i >= 0; i--) {
                completeBody.removeChild(completeBody.childNodes[i]);
            }
            completeDiv.style.border = "none";
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <h1>
      Dictionary</h1>
<p style="text-align: center;">
      <label for="names">
          Search :
          <asp:TextBox ID="names" runat="server"></asp:TextBox></label>
      <asp:Button ID="Button1" runat="server" Text="Go" />
</p>
<div style="position: absolute;" id="popup" runat="server">
      <table id="complete_table" border="0" cellspacing="0" cellpadding="0" style="background-color: #cceeff;">
          <tbody id="complete_body">
          </tbody>
      </table>
</div>
    </form>
</body>
</html>

Default.aspx.cs

Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        this.names.Attributes.Add("onKeyup", "findNames();");
    }
}

Default2.aspx.cs

Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;

public partial class Default2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Response.Clear();
        Response.ContentType = "text/xml";     //设置输出的格式为XML
        Response.Charset = "UTF-8";              //设置输出的编码为UTF-8
        this.GetXmlData();

    }

    private void GetXmlData()
    {    //这是用来获取下拉列表框中下面提示的项目数据，获取的数据用XML格式输出
        string[] names = new string[] { "a","ab","abc","a1","a12","1","12","123"};

        string strPara = Request.QueryString["names"].ToString();//传过来的查询参数

        var nameQuery = from name in names
                        where name.ToString().StartsWith(strPara)
                        select name;

        StringBuilder xmlData = new StringBuilder();
        xmlData.AppendLine(@"<?xml version='1.0' encoding='UTF-8' ?>");
        xmlData.AppendLine(@"<response>");

        foreach(string str in nameQuery)
        {
            xmlData.AppendLine(@"<res>" + str + "</res>");
        }

        xmlData.AppendLine(@"</response>");
        Response.Write(xmlData.ToString());
        Response.End();
    }

}

weixin_33743703

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
asp.net 文本框输入时的自动完成

本文以http://hi.baidu.com/kb81/blog/item/6f7e040848be85d162d98634.html相关内容为基础Default.aspxCode&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %&gt;&lt;...
复制链接

扫一扫