如何在文本框输入第一个字后，自动提示匹配的值？

如何在文本框输入第一个字后，自动出现下拉框提示匹配的值（从数据库中获得）？用C#.net,JS,AJAX实现。
就像在Google里，输入一个有过的字，会出现提示一样。
能给出具体的Code吗？ 或哪里能得到控件？谢谢！

解决方案 »

  1.   

    http://zhidao.baidu.com/question/51981760.html
    要javascript + ajax 等实现
      

  2.   

    不难做，ajax的例子应该有这个吧。可以用javascript＋xmlhttprepuest去做
      

  3.   

    用Ajax实现,在键盘事件中用Ajax到后台获取匹配的项,然后回传到客户端构造一个提示框.
      

  4.   

    ajax实现
    将一下代码部署到iis上，输入d匹配出d1 d2 d3 d4 d5
    输入dd匹配出dd1 dd2 dd3 dd4 dd5
    Index.html文件:
    <html>
    <head>
    <script>
    var xmlHttp;
    function createXMLHttpRequest()
    {
        if(window.ActiveXObject)
        {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if(window.XMLHttpRequest)
        {
            xmlHttp = new XMLHttpRequest();
        }
    }
    function startRequest(data)
    {
        createXMLHttpRequest();
        try
        {
            xmlHttp.onreadystatechange = function(){handleStateChange(data);}
            xmlHttp.open("GET", "data.xml", true);
            xmlHttp.send(null);
        }
        catch(exception)
        {
            alert("xmlHttp Fail");
        }
    }
    function handleStateChange(data)
    {
        if(xmlHttp.readyState == 4)
        {
            if (xmlHttp.status == 200 || xmlHttp.status == 0)
            {
                var root = xmlHttp.responseXML.documentElement;
                try
                {
                    var info = root.getElementsByTagName(data)[0];
                    var text = info.firstChild.nodeValue;
                    var array = text.split("-");
                    var obj = document.getElementById("div1");
                    obj.style.display = "block";
                    obj.innerHTML = "";
                    for(var i=0; i<array.length; i++)
                    {
                        obj.innerHTML = obj.innerHTML + "<span style='display:block' onclick='spanClick()' onmouseover='spanMouseOver()'>" + array[i] + "</span>";
                    }
                }
                catch(exception)
                {
                    var obj = document.getElementById("div1");
                    obj.style.display = "block";
                    obj.innerHTML = "";
                }
            }
        }
    }
    function textChange(data)
    {
        if(data == "")
        {
            var obj = document.getElementById("div1");
            obj.style.display = "block";
            obj.innerHTML = "";
        }
        else
        {
             startRequest(data);
        }
    }
    function spanClick()
    {
        var spanObj=event.srcElement;
        var textObj = document.getElementById("text1");
        textObj.value = spanObj.innerHTML;
        var divObj = document.getElementById("div1");
        divObj.style.display = "none";
        divObj.innerHTML = "";
    }
    var oldSpanObj;
    function spanMouseOver()
    {
        if(oldSpanObj != null)
        {
            oldSpanObj.style.backgroundColor = "#FFFFFF";
        }
        var spanObj=event.srcElement;
        spanObj.style.backgroundColor = "#FF7788";
        oldSpanObj = spanObj;
    }
    </script>
    </head>
    <body>
    <input type="text" id="text1" onpropertychange="textChange(this.value);" />
    <br>
    <div id="div1" style="border:1px solid #8877EE;display:none;position:absolute;width:146;background-color:#EEFFFF">
    </div>
    </body>
    </html>data.xml文件:
    <?xml version="1.0" encoding="GB2312"?> 
    <root>
        <d>d1</d>
        <dd>dd1-dd2</dd>
        <ddd>ddd1-ddd2-ddd3</ddd>
        <dddd>dddd1-dddd2-dddd3-dddd4</dddd>
        <ddddd>ddddd1-ddddd2-ddddd3-ddddd4-ddddd5</ddddd>
    </root>