怎么样证你的文本框智能化（急）！！！

比如你的的数据库中有a,aa,b,bb,c,cc这些数据。而当你在文本框中输入a时，文本框会自动的出现列表显示出接近你想要，这里就会依次列出a,aa,b,bb,c,cc;如果输入b,就会列出b,bb,c,cc.当然，再输入二个字符aa时，会列出aa,b,bb,c,cc。依次类推。希望哪位高手给出代码 。

解决方案 »

  1.   

    输入a还显示b和c？
    用ajax实现，在文本框里加入一个onpropertychange事件，在事件方法里调用ajax
      

  2.   

    <HTML>
    <HEAD><title>模仿IE自动完成功能，读取输入框存取记录</title>
    <style>
    body,div {
    font-family:verdana;
    line-height:100%;
    font-size:9pt;
    }
    input {
    width:300px;
    }
    h1 {
    text-align:center;
    font-size:2.2em;
    }
    #divf {
    margin:10px;
    font-size:0.8em;
    text-align:center;
    }
    #divc {
    border:1px solid #333333;
    }
    .des {
    width:500px;
    background-color:lightyellow;
    border:1px solid #333;
    padding:20px;
    margin-top:20px;
    }
    .mouseover {
    color:#ffffff;
    background-color:highlight;
    width:100%;
    cursor:default;
    }
    .mouseout {
    color:#000000;
    width:100%;
    background-color:#ffffff;
    cursor:default;
    }
    </style>
    <SCRIPT LANGUAGE="JavaScript">
    <!--// script by blueDestiny
    // email : blueDestiny [at] 126 . com// Object: jsAuto
    // browser: ie, mf.
    // example:// step1 : 
    // create autocomplete container, return object and bind event to the object, and 
    ///create a new jsAuto instance:
    // <div id="divautocomplete"></div>
    // var autocomplete = new jsAuto("autocomplete","divautocomplete")
    // handle event:
    // autocomplete.handleEvent(value, returnObjectID)
    // <input id="rautocomplete" onkeyup="autocomplete.handleEvent(this.value,"ratocomplete",event)>// step2 :
    // add autocompete item:
    // autocomplete.item(string)
    // string must be a string var, you can split the string by ","
    // autocomplete.item("blueDestiny,never-online,csdn,blueidea")// http://www.never-online.comfunction 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 :nn 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>
    <h1>Autocomplete Function</h1>
    <div align="center">
    <input onkeyup="jsAutoInstance.handleEvent(this.value,'auto',event)" id="auto">
    </div>
    <div id="divf">
    Power By Miracle, never-online
    </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,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,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,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,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,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,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,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,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,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,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,z-start");
    jsAutoInstance.item("blueDestiny");
    jsAutoInstance.item("BlueMiracle,Blue");
    jsAutoInstance.item("angela,geniuslau");
    jsAutoInstance.item("never-online");
    //-->
    </SCRIPT>
    <center>请随便输入一个字母看看 -_-</center>
    </BODY>
    </HTML>