如何实现输入英文首字母弹出下拉列表数据快速输入的功能 50分

如题，输入英文首字母，比如输入C，下拉框中如果有对应的数据，如CSDN，自动选中，实现快速输入功能

解决方案 »

  1.   

    google一下嘛<HTML>
    <HEAD><title>带输入匹配的文本框</title>
    <style>
    body,div {
    font-family:verdana;
    line-height:100%;
    font-size:10pt;
    }
    input {
    width:320px;
    }
    h1 {
    text-align:center;
    font-size:2.2em;
    }
    #divc {
    border:1px solid #555;
    }
    .des {
    width:500px;
    background-color:lightyellow;
    border:1px solid #555;
    padding:25px;
    margin-top:25px;
    }
    .mouseover {
    color:#ffffff;
    background-color:highlight;
    width:100%;
    cursor:default;
    }
    .mouseout {
    color:#000;
    width:100%;
    background-color:#ffffff;
    cursor:default;
    }
    </style>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function jsAuto(instanceName,objID)
    {
    this._msg = [];
    this._x = null;
    this._o = document.getElementById( objID );
    if (!this._o) return;
    this._f = null;
    this._i = instanceName;
    this._r = null;
    this._c = 0;
    this._s = false;
    this._v = null;
    this._o.style.visibility = "hidden";
    this._o.style.position = "absolute";
    this._o.style.zIndex = "9999";
    this._o.style.overflow = "auto";
    this._o.style.height = "50";
    return this;
    };jsAuto.prototype.directionKey=function() { with (this)
    {
    var e = _e.keyCode ? _e.keyCode : _e.which;
    var l = _o.childNodes.length;
    (_c>l-1 || _c<0) ? _s=false : ""; if( e==40  &&  _s )
    {
    _o.childNodes[_c].className="mouseout";
    (_c >= l-1) ? _c=0 : _c ++;
    _o.childNodes[_c].className="mouseover";
    }
    if( e==38  &&  _s )
    {
    _o.childNodes[_c].className="mouseout";
    _c--<=0 ? _c = _o.childNodes.length-1 : "";
    _o.childNodes[_c].className="mouseover";
    }
    if( e==13 )
    {
    if(_o.childNodes[_c]  &&  _o.style.visibility=="visible")
    {
    _r.value = _x[_c];
    _o.style.visibility = "hidden";
    }
    }
    if( !_s )
    {
    _c = 0;
    _o.childNodes[_c].className="mouseover";
    _s = true;
    }
    }};// mouseEvent.
    jsAuto.prototype.domouseover=function(obj) { with (this)
    {
    _o.childNodes[_c].className = "mouseout";
    _c = 0;
    obj.tagName=="DIV" ? obj.className="mouseover" : obj.parentElement.className="mouseover";
    }};
    jsAuto.prototype.domouseout=function(obj)
    {
    obj.tagName=="DIV" ? obj.className="mouseout" : obj.parentElement.className="mouseout";
    };
    jsAuto.prototype.doclick=function(msg) { with (this)
    {
    if(_r)
    {
    _r.value = msg;
    _o.style.visibility = "hidden";
    }
    else
    {
    alert("javascript autocomplete ERROR :\n\n can not get return object.");
    return;
    }
    }};// object method;
    jsAuto.prototype.item=function(msg)
    {
    if( msg.indexOf(",")>0 )
    {
    var arrMsg=msg.split(",");
    for(var i=0; i<arrMsg.length; i++)
    {
    arrMsg[i] ? this._msg.push(arrMsg[i]) : "";
    }
    }
    else
    {
    this._msg.push(msg);
    }
    this._msg.sort();
    };
    jsAuto.prototype.append=function(msg) { with (this)
    {
    _i ? "" : _i = eval(_i);
    _x.push(msg);
    var div = document.createElement("DIV"); //bind event to object.
    div.onmouseover = function(){_i.domouseover(this)};
    div.onmouseout = function(){_i.domouseout(this)};
    div.onclick = function(){_i.doclick(msg)};
    var re  = new RegExp("(" + _v + ")","i");
    div.style.lineHeight="140%";
    div.className = "mouseout";
    if (_v) div.innerHTML = msg.replace(re , "<strong>$1</strong>");
    div.style.fontFamily = "verdana"; _o.appendChild(div);
    }};
    jsAuto.prototype.display=function() { with(this)
    {
    if(_f && _v!="")
    {
    _o.style.left = _r.offsetLeft;
    _o.style.width = _r.offsetWidth;
    _o.style.top = _r.offsetTop + _r.offsetHeight;
    _o.style.visibility = "visible";
    }
    else
    {
    _o.style.visibility="hidden";
    }
    }};
    jsAuto.prototype.handleEvent=function(fValue,fID,event) { with (this)
    {
    var re;
    _e = event;
    var e = _e.keyCode ? _e.keyCode : _e.which;
    _x = [];
    _f = false;
    _r = document.getElementById( fID );
    _v = fValue;
    _i = eval(_i);
    re = new RegExp("^" + fValue + "", "i");
    _o.innerHTML=""; for(var i=0; i<_msg.length; i++)
    {
    if(re.test(_msg[i]))
    {
    _i.append(_msg[i]);
    _f = true;
    }
    } _i ? _i.display() : alert("can not get instance"); if(_f)
    {
    if((e==38 || e==40 || e==13))
    {
    _i.directionKey();
    }
    else
    {
    _c=0;
    _o.childNodes[_c].className = "mouseover";
    _s=true;
    }
    }
    }};
    window.onerror=new Function("return true;");
    //-->
    </SCRIPT>
    </HEAD><BODY>
    <div id="divc">
    <!--this is the autocomplete container.-->
    </div>
    <div align="center">
    <input onkeyup="jsAutoInstance.handleEvent(this.value,'auto',event)" id="auto">
    </div><SCRIPT LANGUAGE="JavaScript">
    <!--
    var jsAutoInstance = new jsAuto("jsAutoInstance","divc");
    jsAutoInstance.item("a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,s-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,a-start,b-start,c-start,d-start,e-start,z-start,z-start");
    jsAutoInstance.item("blueDestiny");
    jsAutoInstance.item("BlueMiracle,Blue");
    jsAutoInstance.item("angela,geniuslau");
    jsAutoInstance.item("never-online");
    //-->
    </SCRIPT>
    <center>请在输入框输入一个字母：</center>
    </BODY>
    </HTML>