zoukankan      html  css  js  c++  java

  • [转]输入框自动完成,模仿IE的，支持FireFox

    1、可设置自动完成功能所提示的字符。
    2、可用方向键选择。
    3、如果选择的当前元素为首元素，则按上（方向键）则会自动跳到末元素。
    4、如果选择的当前元素为末元素，则按下（方向键）则会自动跳到首元素。
    5、当获取值为空时，自动隐藏 自动完成TIP的容器

    <!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     {
    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     {
    500px;
    background    -color:lightyellow;
    border:1px solid #    333;
    padding:20px;
    margin    -top:20px;
    }
    .mouseover     {
    color:#ffffff;
    background    -color:highlight;
    100%;
    cursor:    default;
    }
    .mouseout     {
    color:#    000000;
    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.com

    //instanceName为你生成的实例名，objID为监听的对象ID
    //    具体请见最下面的例子

    function jsAuto(instanceName,objID)
    {
            //初始化成员；
        //_msg: 预先实例化的自动完成内容
        this._msg = [];
            this._x = null;
            this._o = document.getElementById( objID );
            if (!this._o) return;
            //标志flag的缩写
        this._f = null;
            //instanceName的缩写
        this._i = instanceName;
        
            //返回的对象
        //returnObject
        this._r = null;
            //按上下键时，得到当前的mouseover是第几个元素
        //count
        this._c = 0;
            //是否可以执行按上下键
        //selectflag
        this._s = false;
            //Value的缩写
        this._v = null;
            //初始化object的状态
        this._o.style.display = "none";
            this._o.style.position = "absolute";
            this._o.style.zIndex = "9999";
            this._offset=function(e)
            {
                var t = e.offsetTop;
                var l = e.offsetLeft;
                var w = e.offsetWidth;
                var h = e.offsetHeight;

                while(e=e.offsetParent)
                {
                t    +=e.offsetTop;
                l    +=e.offsetLeft;
            }
                return {
                t : t,
                l : l,
                w : w,
                h : h
            }
        }
            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.display=="block")
                {
                _r.value     = _x[_c];
                _o.style.display     = "none";
            }
        }
            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.display     = "none";
        }
            else
            {
            alert(    "javascript autocomplete ERROR :\n\n can not get return object.");
                return;
        }
    }    }    ;

    // object method;
    //     对象的原型方法

    // 添加项目;
    //     可以用英文,分割
    //     JK说的是对的，我当初也是不想用逗号的
    //     如果你不想用,分割，可自己改写这里

    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!="")
            {
                var l = _offset(_r);
            _o.style.left     = l.l;
            _o.style.width     = l.w;
            _o.style.top     = l.t + l.h;
            _o.style.display     = "block";
            _o.style.display     = "block";
        }
            else
            {
            _o.style.display    ="none";
        }
    }    }    ;
    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;
            // 这里用eval，返回生成的实例对象。
        _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");
    jsAutoInstance.item(    "blueDestiny");
    jsAutoInstance.item(    "BlueMiracle,Blue");
    jsAutoInstance.item(    "angela,geniuslau");
    jsAutoInstance.item(    "never-online");
    //-->
    </SCRIPT>
    </BODY>
    </HTML>
    </body></html>
  • 相关阅读:
    C# 显式创建线程 or 使用线程池线程--new Thread() or ThreadPool.QueueUserWorkItem()
    B树、B-树、B+树、B*树详解
    C# Volatile 类
    volatile（C# 参考）
    C#中volatile的用法
    C#编程总结（六）异步编程
    C#编程总结（五）多线程带给我们的一些思考
    C#编程总结（三）线程同步
    C#编程总结（二）多线程基础
    C#编程总结（一）序列化
  • 原文地址：https://www.cnblogs.com/xiang/p/437647.html
Copyright © 2011-2022 走看看