<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %><!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>
    <title>输入自动完成</title>
    <script language="javascript">
        //输入信息的文本框
        var txtInput;
        //下拉表当前选中项的索引 
       
        var currentIndex = -1; 
      
        //初始化参数,和下拉表位置
        function initPar()
        {
            txtInput =document.getElementById("txtCompanyName");
            //设置下拉表 相对于 文本输入框的位置 
            setPosition();
        } 
        
        //设置下拉表 相对于 文本输入框的位置
        function setPosition()
        {
            var width = txtInput.offsetWidth;
            var left = getLength("offsetLeft");
            var top = getLength("offsetTop") + txtInput.offsetHeight;
          
            divContent.style.left = left + "px";
            divContent.style.top = top + "px"; 
            divContent.style.width = width + "px";
        } 
        
      //获取对应属性的长度 
        function getLength(attr)
        {
            var offset = 0;
            var item = txtInput;
            while (item)
            {
                offset += item[attr];
                item = item.offsetParent;
            } 
            return offset; 
        }         //自动完成
        function autoComplete()
        {
            //如果按下 向上, 向下 或 回车
            if (event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 13)
            { 
                //选择当前项 
                selItemByKey();
            } 
            else //向服务器发送请求
            { 
                //如果值为空 
                if (txtInput.value== "")
                {
                    divContent.style.display='none'; 
                    return;
                } 
                //恢复下拉选择项为 -1 
                currentIndex = -1;                 //开始请求
                requestObj = new ActiveXObject("Microsoft.XMLHTTP");
                requestObj.onreadystatechange = displayResult;
                requestObj.open("POST", "AutoComplete.aspx?ts=" + new Date().toLocaleString(), true);
                requestObj.send(txtInput.value); 
            } 
        } 
        
        //显示结果 
        function displayResult()
        {
            if (requestObj.readyState == 4)
            {
                    showData();
                    divContent.style.display = "";
            } 
        } 
        
        //显示服务器返回的结果 ,并形成下拉表
        function showData()
        {
             //获取数据 
            var doc = new ActiveXObject("MSXML2.DOMDocument.3.0");
            doc.loadXML(requestObj.responseText);
           
           
            //显示数据的xslt 
            var docStyle = new ActiveXObject("MSXML2.FreeThreadedDOMDocument");
            docStyle.async = false; 
            docStyle.load("list.xslt");
              
            var docTemplate = new ActiveXObject("MSXML2.XSLTemplate");
            docTemplate.stylesheet =docStyle;
            
            //通过xslt转换xml数据 
            var processor =docTemplate.createProcessor();
                      
            processor.input =doc;   
            processor.transform();
            var res =processor.output;
           
            //显示转后后的结果
            divContent.innerHTML =res; 
        } 
        
        //通过键盘选择下拉项 
        function selItemByKey()
        {
            //下拉表 
            var tbl = document.getElementById("tblContent"); 
            if (!tbl)
            {
                return; 
            } 
            //下拉表的项数
            var maxRow = tbl.rows.length; 
            //向上 
            if (event.keyCode == 38 && currentIndex > 0)
            {
                currentIndex--;
            } 
            //向下 
            else if (event.keyCode == 40 && currentIndex < maxRow-1)
            {
                currentIndex++;
            }
            //回车 
            else if (event.keyCode == 13)
            {
                selValue();
                return;
            } 
            
            clearColor();
            txtInput.value = tbl.rows[currentIndex].innerText; 
            //设置当前项背景颜色为blue 标记选中 
            tbl.rows[currentIndex].style.backgroundColor = "InfoBackground"; 
        } 
        
        //清除下拉项的背景颜色 
        function clearColor()
        {
            var tbl = document.getElementById("tblContent");
            for (var i = 0; i < tbl.rows.length; i++)
            {
                    tbl.rows[i].style.backgroundColor = ""; 
            } 
        } 
        
        //选择下拉表中当前项的值 ,用于按回车或鼠标单击选中当前项的值
        function selValue()
        {
            if (event.keyCode != 13)
            { 
                var text = event.srcElement.innerText;
                txtInput.value = text; 
            } 
            initList(); 
        } 
        
        //文本框失去焦点时 设置下拉表可见性 
        function setDisplay()
        {
            //获取当前活动td的表格 
            if (document.activeElement.tagName == "TD")
            {
                var tbl = document.activeElement.parentElement.parentElement.parentElement; 
                //如果不是下拉表,则隐藏 下拉表 
                if (tbl.id != "tblContent")
                {
                    initList();
                }
                return;
            } 
            
            initList();
            
        } 
      
        function initList()
        {
            divContent.style.display='none'; 
            divContent.innerHTML = "";
            currentIndex = -1;
        } 
    </script>
</head>
<body onload="initPar();">
<form runat="server">
CompanyName<input type="text" id="txtCompanyName" onkeyup="autoComplete()" onblur="setDisplay();" style="width:400px"/>
<!-- 显示下拉表的div-->
<div id="divContent" style="display:none; position:absolute; ">
</div>
</form>
</body>
</html>AutoComplete.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AutoComplete.aspx.cs" Inherits="AutoComplete" %>
AutoComplete.aspx.csusing System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using System.Text;
using System.IO;
public partial class AutoComplete : System.Web.UI.Page
{
    private static string conString = "server=fhj-2edfb3d5c20\\sql2005;uid=sa;pwd=1;database=book09";
    protected void Page_Load(object sender, EventArgs e)
    {
        string input = GetInput();
        Response.Write(GetCompanyName(input));
    }
    private string GetInput()
    {
        Stream s = Request.InputStream;
        int count = 0;
        byte[] buffer = new byte[1024];
        StringBuilder builder = new StringBuilder();
        while ((count = s.Read(buffer, 0, 1024)) > 0)
        {
            builder.Append(Encoding.UTF8.GetString(buffer, 0, count));
        }        return builder.ToString();
    }    private string GetCompanyName(string input)
    {
        using (SqlConnection con = new SqlConnection(conString))
        {
            SqlCommand command = new SqlCommand("select username from UserInfo where Username like '"+input+"%'", con);
            //command.Parameters.Add(new SqlParameter("@name", input + "%"));
            SqlDataAdapter adapter = new SqlDataAdapter(command);
            DataSet ds = new DataSet();
            adapter.Fill(ds);
            return ds.GetXml();
        }
    }
}
list.xslt<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"/>
<xsl:template match="/">
<xsl:apply-templates/>
</xsl:template>
<xsl:template match="NewDataSet">
<table id="tblContent" style="background-color:GrayText">
<xsl:for-each select="Table">
<tr>
<!--td中单击时选择当前值, 鼠标在上时更改行背景颜色,鼠标离开后清除背景颜色-->
<td onclick="selValue()" style="cursor:hand" onmouseover="clearColor();this.parentElement.style.backgroundColor='InfoBackground'" onmouseout="clearColor()">
<xsl:value-of select="CompanyName"/>
</td>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>
数据都返回来了,就是在 showData()方法里把数据填充到div中时,只有空的框架,没有数据

解决方案 »

  1.   

    不用自己做微软的ajax框架提供了一个AutoComplete控件做这个事
      

  2.   

    我也是在网上看挺好的,但是就是显示的div中没有数据,我弄不懂了
      

  3.   

    在控件上使用onpropertychange事件...实时传回控件中的值给WebService进行比对...取回列表显示到Div里
      

  4.   


    Ajax自己写可以自主的东西多啊...用控件有时不方便...当然了..仁者见仁..