仿百度搜索智能提示(纯JS实现)

项目中经常用到搜索智能提示，开源的象jQuery、yui等都有，但是觉得有点臃肿，于是自己用ajaxpro+JavaScript搞了一个

目前只支持ie，可能还有若干个bug。相信新手应该用得着吧，老鸟就算了。

大家发现了请指出，我马上改正，大家多多支持哈~~

 前台核心代码:

   var arrList = new Array();//要搜索的数据

    var objouter, objInput, objInputId = "txtSearch";//控件ID

    var selectedIndex = -1, intTmp;

    //初始化

    function smanPromptList() {

        this.style = "overflow:hidden;393px;height:auto;background:#FFFFFF;border:1px solid #000000;font-size:14px;cursor:default;"

        if (arrList.constructor != Array) {

            alert('smanPromptList初始化失败:第一个参数非数组!');

            return;

        }

        document.write("<div id='__smanDisp' style='position:absolute;display:none;" + this.style + "' onblur></div>");

        document.write("<style type=\"text/css\">.sman_selectedStyle{background-Color:#3366CC;color:#FFFFFF}</style>");

 

        arrList.sort(function(a, b) {

            if (a.length > b.length) return 1;

            else if (a.length == b.length) return a.localeCompare(b);

            else return -1;

        });

        objouter = document.getElementById("__smanDisp") //显示的DIV对象

        objInput = document.getElementById(objInputId);  //文本框对象

        if (objInput == null) {

            alert('smanPromptList初始化失败:没有找到"' + objInputId + '"文本框');

            return;

        }

        objInput.onblur = function() { objouter.style.display = 'none'; }

        objInput.onkeyup = checkKeyCode;

        objInput.onfocus = checkAndShow;

    }

 

    function getAbsoluteHeight(ob) {

        return ob.offsetHeight;

    }

    function getAbsoluteWidth(ob) {

        return ob.offsetWidth;

    }

    function getAbsoluteLeft(ob) {

        var s_el = 0, el = ob;

        while (el) {

            s_el = s_el + el.offsetLeft;

            el = el.offsetParent;

        };

        return s_el;

    }

    function getAbsoluteTop(ob) {

        var s_el = 0, el = ob;

        while (el) {

            s_el = s_el + el.offsetTop;

            el = el.offsetParent;

        };

        return s_el;

    }

    function outSelection(Index) {

        objInput.value = objouter.children[Index].innerText.Trim();

        objouter.style.display = 'none';

    }

    function divPosition() {

        objouter.style.top = getAbsoluteHeight(objInput) + getAbsoluteTop(objInput);

        objouter.style.left = getAbsoluteLeft(objInput);

        objouter.style.width = getAbsoluteWidth(objInput);

    }

    function chageSelection(isUp) {

        if (objouter.style.display == 'none') {

            objouter.style.display = '';

        }

        else {

            if (isUp)

                selectedIndex++;

            else

                selectedIndex--;

        }

        var maxIndex = objouter.children.length - 1;

        if (selectedIndex < 0) { selectedIndex = 0; }

        if (selectedIndex > maxIndex) { selectedIndex = maxIndex; }

        if (selectedIndex == maxIndex) { selectedIndex = -1; }

 

        for (intTmp = 0; intTmp <= maxIndex; intTmp++) {

            if (intTmp == selectedIndex) {

                objouter.children[intTmp].className = "sman_selectedStyle";

                objInput.value = objouter.children[selectedIndex].innerText.Trim();

            }

            else {

                objouter.children[intTmp].className = "";

            }

        }

    }

    function checkKeyCode() {

        var ie = (document.all) ? true : false

        if (ie) {

            var keyCode = event.keyCode

            if (keyCode == 40 || keyCode == 38) {

                var isUp = false

                if (keyCode == 40)

                    isUp = true;

                chageSelection(isUp)

            }

            else if (keyCode == 13) {

                outSelection(selectedIndex);

            }

            else {

                checkAndShow();

            }

        }

        else {

            checkAndShow();

        }

        divPosition();

    }

 

    function checkAndShow() {

        var strInput = objInput.value.Trim();

        if (strInput != "") {

            divPosition();

            selectedIndex = -1;

            arrList.length = 0;

            objouter.innerHTML = "";

 //================这里修改数据==============================

            var result = WebApplicationTestDiv.WebForm11.GetArray(strInput).value;

//=======================================================

            var data = eval('(' + result + ')');

            for (var j = 0; j < data.length; j++) {

 

                arrList[j] = data[j];

            }

 

            for (intTmp = 0; intTmp < arrList.length; intTmp++) {

                for (i = 0; i < arrList[intTmp].length; i++) {

                    if (arrList[intTmp].substr(i, strInput.length).toUpperCase() == strInput.toUpperCase()) {

                        addOption(arrList[intTmp], strInput);

                    }

                    if (objouter.childNodes.length >= 10) {

                        break;

                    }

                }

            }

            if (objouter.childNodes.length > 0) {

                objouter.innerHTML += "<div style=\"395px;height:22px;text-align:right;color:Blue;text-decoration:underline;cursor:pointer;\">关闭</div>";

            }

            objouter.style.display = '';

        }

        else {

            objouter.style.display = 'none';

        }

    }

    //显示搜索的数据并关键字涂色

    function addOption(value, keyw) {

        var v = value.replace(keyw, "<b><font color=\"red\">" + keyw + "</font></b>");

        objouter.innerHTML += "<div style=\"395px;height:22px\" onmouseover=\"this.className='sman_selectedStyle'\" onmouseout=\"this.className=''\" onmousedown=\"document.getElementById('" + objInputId + "').value='" + value + "'\">" + v + "</div>"

    }

    String.prototype.Trim = function() {

        return this.replace(/(^\s*)|(\s*$)/g, "");

    }

smanPromptList();

后台核心代码：

 

        [AjaxPro.AjaxMethod]

        public string GetArray(string name)

        {

            try

            {

                List<string> list = new List<string>();

                 #region

                　　list.Add("1");

                　　list.Add("12");

                　　list.Add("123");

                　　list.Add("1234");

                　　list.Add("12345");

                　　list.Add("123456");

　　                list.Add("1234567");

         　　       list.Add("12345678");

                　　list.Add("123456789");

                　　list.Add("9876543210");

　　                list.Add("987654321");

         　　       list.Add("98765432");

　　                list.Add("9876543");

                　　list.Add("987654");

               　　 list.Add("98765");

              　　  list.Add("9876");

           　　     list.Add("987");

            　　    list.Add("98");

           　　     list.Add("9");

           　　     list.Add("1111222");

               　　 list.Add("1sdfsdf.comdos32.cn");

              　　  list.Add("111222.comdos32.cn");

               　　 list.Add("a11sdafs.netdos32.cn");

             　　   list.Add("b22dsafsdfdos32.cn");

              　　  list.Add("c333asdfsadfdos32.cn");

             　　   list.Add("4444dsafasdfdos32.cn");

             　　   list.Add("dddsfddsafdsafdos32.cn");

             　　   list.Add("121213dsafsdafdos32.cn");

               　　 list.Add("43213asdfadsfdos32.cn");

           　　     list.Add("dsa3121dasf3dos32.cn");

           　　     list.Add("a213dos32.cn");

          　　      list.Add("323313dos32.cn");

            　　    list.Add("3213dos32.cn");

            　　    list.Add("32213dos32.cn");

            　　    list.Add("dsfsdddddos32.cn");

          　　      list.Add("ds911dfsfddos32.cn");

            　　    list.Add("ffdafddos32.cn");

            　　    list.Add("杨澜");

            　　    list.Add("杨扬");

           　　     list.Add("杨白劳");

           　　     list.Add("杨钰莹");

            　　    list.Add("杨百万");

            　　    list.Add("杨一洋");

            　　    list.Add("杨丞琳");

            　　    list.Add("杨一尔");

            　　    list.Add("杨二尔");

                      #endregion

                List<string> l1 = list.FindAll(delegate(string ss) { return ss.Contains(name); });

                string str = "[";

                foreach (string s in l1)

                {

                    str += "\"" + s + "\"" + ",";

                }

                str = str.TrimEnd(',') + "]";

                return str;

            }

            catch (Exception ex)

            {

                throw ex;

            }

  }

 最后效果如图：