ASP.NET(C#)中的自动下拉框的实现

ASP.NET(C#)中的自动下拉框的实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>Ajax实现自动提示的文本框</title>

<style>



</style>

<script language="javascript">

var oInputField;    //考虑到很多函数中都要使用

var oPopDiv;        //因此采用全局变量的形式

var oColorsUl;

var xmlHttp;

function createXMLHttpRequest(){

    if(window.ActiveXObject)

        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

    else if(window.XMLHttpRequest)

        xmlHttp = new XMLHttpRequest();

}

function initVars(){

    //初始化变量

    oInputField = document.forms["myForm1"].colors;

    oPopDiv = document.getElementById("popup");

    oColorsUl = document.getElementById("colors_ul");

}

function clearColors(){

    //清除提示内容

    for(var i=oColorsUl.childNodes.length-1;i>=0;i--)

        oColorsUl.removeChild(oColorsUl.childNodes[i]);

    oPopDiv.className = "hide";

}

function setColors(the_colors){

    //显示提示框，传入的参数即为匹配出来的结果组成的数组

    clearColors();    //每输入一个字母就先清除原先的提示，再继续

    oPopDiv.className = "show";

    var oLi;

    for(var i=0;i<the_colors.length;i++){

        //将匹配的提示结果逐一显示给用户

        oLi = document.createElement("li");

        oColorsUl.appendChild(oLi);

        oLi.appendChild(document.createTextNode(the_colors[i]));



        oLi.onmouseover = function(){

            this.className = "mouseOver";    //鼠标经过时高亮

        }

        oLi.onmouseout = function(){

            this.className = "mouseOut";    //离开时恢复原样

        }

        oLi.onclick = function(){

            //用户点击某个匹配项时，设置输入框为该项的值

            oInputField.value = this.firstChild.nodeValue;

            clearColors();    //同时清除提示框

        }

    }

}

function findColors(){

    initVars();        //初始化变量

    if(oInputField.value.length > 0){

        createXMLHttpRequest();        //将用户输入发送给服务器

        var sUrl = "9-10.aspx?sColor=" + oInputField.value + "&timestamp=" + new Date().getTime();

        xmlHttp.open("GET",sUrl,true);

        xmlHttp.onreadystatechange = function(){

            if(xmlHttp.readyState == 4 && xmlHttp.status == 200){

                var aResult = new Array();

                if(xmlHttp.responseText.length){

                    aResult = xmlHttp.responseText.split(",");

                    setColors(aResult);    //显示服务器结果

                }

                else

                    clearColors();

            }

        }

        xmlHttp.send(null);

    }

    else

        clearColors();    //无输入时清除提示框（例如用户按del键）

}

</script>

</head>

<body>

<form method="post" name="myForm1">

Color: <input type="text" name="colors" id="colors" onkeyup="findColors();" />

</form>

<div id="popup">

    <ul id="colors_ul"></ul>

</div>

</body>

</html>
相关阅读:
Sed的使用方法简介
 Shell脚本基础
 网络配置与内核模块相关
 RPM管理，计划任务与性能监控
 SSH服务
 LVM与RAID阵列
 网络存储服务器
 FTP服务
 网络安全之iptables防火墙
 MySQL使用笔记（七）排序和限制数据记录查询
原文地址：https://www.cnblogs.com/hjtdlx/p/2248488.html

热门文章
JQuery
BOM
javascript
css定位
 css
简单的复用accep
多客户连接返回通话
 协程
 python 多线程小方法
 Awk使用方法简介