[ 原创 ]第一次在js版发贴，模仿IE自动完成功能，支持Firefox.

good提几个问题
1.非的移动到字上才选中
2.选中的高度小，有些字看不清楚，比如g,p就很容易看成o
3.增加键盘功能，向下能开始选择

解决方案 »

  1.   

    第一个问题.mouseout {
    width:100%;<<---
    }
      

  2.   

    要说的前面都说了。不好再说什么了，帮你顶一个。
    暖阳兄：鼻炎康系佛山出产的吗？我点解吾知道的？========================================
    http://peipei3000.jishuqi.com/reg.asp
    http://www.goofar.com/?ID=634664011139
    ========================================
      

  3.   

    OK，现在按大家的意见全部改好，如果还有什么bug，就继续跟贴说说看法吧
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <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 objce, 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";
    return this;
    };jsAuto.prototype.directionKey=function() { with (this)
    {
    var e = _e.keyCode ? _e.keyCode : _e.which;
    var l = _o.childNodes.length;
    (_c >= l || !_c || _c==0) ? _c=0 : ""; if( e==40 && _c!=l-1 && _s )
    {
    _o.childNodes[_c].className="mouseout";
    _c ++;
    _o.childNodes[_c].className="mouseover";
    }
    if( e==38 && _c!=0 && _s )
    {
    _o.childNodes[_c].className="mouseout";
    _c --;
    _o.childNodes[_c].className="mouseover";
    }
    else
    {
    _s = false;
    }
    if( e==13 )
    {
    if(_o.childNodes[_c])
    {
    _r.value = _x[_c];
    _o.style.visibility = "hidden";
    }
    }
    if( !_s )
    {
    _o.childNodes[_c].className="mouseover";
    _s = true;
    }
    }};// mouseEvent.
    jsAuto.prototype.domouseover=function(obj) { with (this)
    {
    _o.childNodes[_c].className = "mouseout";
    _c = 0;
    _s = false;
    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)
    {
    _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;
    _x = [];
    _e = event;
    _f = false;
    _r = document.getElementById( fID );
    _v = fValue;
    _i = eval(_i);
    re = new RegExp("^" + fValue + "", "i"); if( fValue=="" ) return;
    _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");
    _f ? _i.directionKey() : "";
    }};
    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");
    jsAutoInstance.item("blueDestiny");
    jsAutoInstance.item("BlueMiracle,Blue");
    jsAutoInstance.item("angela,geniuslau");
    jsAutoInstance.item("never-online");
    //-->
    </SCRIPT>
    </BODY>
    </HTML>
      

  4.   

    再加
    1.esc取消选择
    2.失去焦点取消选择
      

  5.   

    改进了一下，可以用方向键上下移动，并且，如果在第一个节点里按向上键，即到最后一个元素，最后一个元素按下键，到首元素；<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <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";
    return this;
    };jsAuto.prototype.directionKey=function() { with (this)
    {
    var e = _e.keyCode ? _e.keyCode : _e.which;
    var l = _o.childNodes.length; 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])
    {
    _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;
    //_s = false;
    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)
    {
    _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;
    _x = [];
    _e = event;
    _f = false;
    _r = document.getElementById( fID );
    _v = fValue;
    _i = eval(_i);
    re = new RegExp("^" + fValue + "", "i"); if( fValue=="" ) return;
    _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");
    _f ? _i.directionKey() : "";
    }};
    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");
    jsAutoInstance.item("blueDestiny");
    jsAutoInstance.item("BlueMiracle,Blue");
    jsAutoInstance.item("angela,geniuslau");
    jsAutoInstance.item("never-online");
    //-->
    </SCRIPT>
    </BODY>
    </HTML>
      

  6.   

    csdn不支持修改自己的贴子内容，难贴得要命，出一个小bug都得重贴，改进了的自动完成功能到我blog去看吧http://blog.csdn.net/BlueDestiny/archive/2006/02/22/605875.aspx
      

  7.   

    这个东西我以前也做过一个，不过那时候只支持IE，
    数据是从数据库里取得生成XML，前台用DOM来做的。
      

  8.   

    路过，不错不错，
    另:
    几点建议---------
    jsAutoInstance.item("a-start,b-start,c-start");
    如果数据里出现字符串里的分隔符的话，
    会让问题变得复杂---------
    <div id="divc">
    <!--this is the autocomplete container.-->
    </div>
    隐藏container div时建议用display，而不用visibility，因为visibility=hidden后，对象还占有空间，会影响页面效果。
    例如，当window大小为500*500时，在输入框里输入d，再删除掉d，可以看到页面出现了异常的滚动条---------
    失去焦点时，应该隐藏选择层，不然在以下的情况下给用户造成不便：
    <input onkeyup="jsAutoInstance.handleEvent(this.value,'auto',event)" id="auto"><br><input>
    用户在combox里输入d，再按tab键---------
    选项太多时应该有滚动条
      

  9.   

    @ jk谢谢你提的建议。我抽空也会按你和大家提的建议完善一下。P.S: 关于上次的那个一般form形式下的validator，我还是觉得还是可以封装htc的...
      

  10.   

    P.S: 关于上次的那个一般form形式下的validator，我还是觉得还是可以封装htc的...
    -----------------我一直没有反对把validate验证封装到htc里
    只是不支持把mandatory验封装到htc里，因为想不出把"必须输入验证"封装到htc里有什么好处
      

  11.   

    @jk
    并不只是必须输入验证等功能，按理说，封装成htc，或不封装成htc，都是相似的，无非都是调用事先准备的脚本来脚证，我的方法就是把每个需要验证的element，加上attribute，如：<input dataType="digit">
    <input dataType="notEmpty">
    <input dataType="range">
    ..等，即使是select或者radio,checkbox，也可以验证，并非是简单的验证，空值，以及整形。
    加上attribute之后，可以方便的验证表单的合法性。
    还有一个问题想请教你一下：
    先看我写的一个东西：
    http://blog.csdn.net/BlueDestiny/archive/2006/02/16/600350.aspx
    问一下，如果我要分割table以及一些不方便分割的标签时，假定分页字节设为 6 ：
    比如：
    <TABLE border=1>
    <TR>
    <TD>aa</TD>
    <TD>bb</TD>
    </TR>
    </TABLE>
    要把上面的table分割成分页的形式，而保持其样式呢我所想到的，就是用正则匹配，或者字符串分割时与我在脚本中预先定义的不可分割标签进行比较，从而得到继承的标签。好像好麻烦？
      

  12.   

    关于前台验证的看法：
    关于加自定义属性，十分支持
    关于具体的dataType类型，可能是见仁见智。通常我的做法是：可以在onblur时就进行的验证，放在这个属性（公司里对应的自定义属性叫contentType）里；必须输入验证放在另一个属性里；其它特殊的验证（如两个日期比大小等）则不属于通用功能。但是最重要的一点是，“特殊验证（由页面代码同事完成）风格”要很容易的跟“通用验证风格”一致。关于前台分页，
    已在你的部落回复了