js自动完成功能，如何可以选择之中的多个值

在网上找到了个自动完成功能的js源码，哪高手可以帮我改一下，当输入一个值，比如a,它会自动显示几个值，我现在想选中之中的多个值，想要的结果是ab,ac,ad,ae（以逗号分隔）：当然是用户选中后返回给input text的值了。
期待各位大侠帮忙，谢恩了。

解决方案 »

  1.   

    js自动完成功能源码:<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">
    <!--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 :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,ab,ac,ad,aae,aa,b,c,e,e");
    jsAutoInstance.item("blueDestiny");
    jsAutoInstance.item("BlueMiracle,Blue");
    jsAutoInstance.item("angela,geniuslau");
    jsAutoInstance.item("never-online");
    //-->
    </SCRIPT>
    <center>请随便输入一个字母看看 -_-</center>
    </BODY>
    </HTML>