仿百度輸入框智能提示的js代碼

更新時間：2013年08月22日 15:17:39 作者：

這篇文章介紹了仿百度輸入框智能提示的js代碼，有需要的朋友可以參考一下

最近客戶需求老是變更，不過有些是因?yàn)榭蛻舸叩眉?，我沒有那么快能完成，所以先做了一個雛形給他們，后來再慢慢改。比如雛形那里我做了一個下拉列表給他們，事實(shí)上他們的數(shù)據(jù)有200多條，用個下拉列表的話很不現(xiàn)實(shí)，你能找那么多？而且那個下拉列表該有多長??？所以很自然的，我想到了百度那個智能提示的功能。

參考了一下之前忘記是哪位大俠寫的東西，他的是使用百度api的，為了簡單起見，我把數(shù)據(jù)都定在了js那里，這樣看官們?nèi)菀桌斫庖恍?/P>

還是整個代碼考上來吧，代碼不長?？剂艘幌轮巴浭悄奈淮髠b寫的東西，他的是使用百度api的，為了簡單起見，我把數(shù)據(jù)都定在了js那里，這樣看官們?nèi)菀桌斫庖恍?BR>

復(fù)制代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .search
        {
            left: 0;
            position: relative;
        }
        #auto_div
        {
            display: none;
            width: 300px;
            border: 1px #74c0f9 solid;
            background: #FFF;
            position: absolute;
            top: 24px;
            left: 0;
            color: #323232;
        }
    </style>
    <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        //測試用的數(shù)據(jù)
        var test_list = ["小張", "小蘇", "小楊", "老張", "老蘇", "老楊", "老爺爺", "小妹妹", "老奶奶", "大鵬", "大明", "大鵬展翅", "你好", "hello", "hi"];
        var old_value = "";
        var highlightindex = -1;   //高亮

        //自動完成
        function AutoComplete(auto, search, mylist) {
            if ($("#" + search).val() != old_value || old_value == "") {
                var autoNode = $("#" + auto);   //緩存對象（彈出框）
                var carlist = new Array();
                var n = 0;
                old_value = $("#" + search).val();

                for (i in mylist) {
                    if (mylist[i].indexOf(old_value) >= 0) {
                        carlist[n++] = mylist[i];
                    }
                }
                if (carlist.length == 0) {
                    autoNode.hide();
                    return;
                }
                autoNode.empty(); //清空上次的記錄
                for (i in carlist) {
                    var wordNode = carlist[i];   //彈出框里的每一條內(nèi)容

var newDivNode = $("<div>").attr("id", i); //設(shè)置每個節(jié)點(diǎn)的id值
newDivNode.attr("style", "font:14px/25px arial;height:25px;padding:0 8px;cursor: pointer;");

newDivNode.html(wordNode).appendTo(autoNode); //追加到彈出框

                    //鼠標(biāo)移入高亮，移開不高亮
                    newDivNode.mouseover(function () {
                        if (highlightindex != -1) {        //原來高亮的節(jié)點(diǎn)要取消高亮（是-1就不需要了）
                            autoNode.children("div").eq(highlightindex).css("background-color", "white");
                        }
                        //記錄新的高亮節(jié)點(diǎn)索引
                        highlightindex = $(this).attr("id");
                        $(this).css("background-color", "#ebebeb");
                    });
                    newDivNode.mouseout(function () {
                        $(this).css("background-color", "white");
                    });

                    //鼠標(biāo)點(diǎn)擊文字上屏
                    newDivNode.click(function () {
                        //取出高亮節(jié)點(diǎn)的文本內(nèi)容
                        var comText = autoNode.hide().children("div").eq(highlightindex).text();
                        highlightindex = -1;
                        //文本框中的內(nèi)容變成高亮節(jié)點(diǎn)的內(nèi)容
                        $("#" + search).val(comText);
                    })
                    if (carlist.length > 0) {    //如果返回值有內(nèi)容就顯示出來
                        autoNode.show();
                    } else {               //服務(wù)器端無內(nèi)容返回那么隱藏彈出框
                        autoNode.hide();
                        //彈出框隱藏的同時，高亮節(jié)點(diǎn)索引值也變成-1
                        highlightindex = -1;
                    }
                }
            }

            //點(diǎn)擊頁面隱藏自動補(bǔ)全提示框
            document.onclick = function (e) {
                var e = e ? e : window.event;
                var tar = e.srcElement || e.target;
                if (tar.id != search) {
                    if ($("#" + auto).is(":visible")) {
                        $("#" + auto).css("display", "none")
                    }
                }
            }

}

        $(function () {
            old_value = $("#search_text").val();
            $("#search_text").focus(function () {
                if ($("#search_text").val() == "") {
                    AutoComplete("auto_div", "search_text", test_list);
                }
            });

            $("#search_text").keyup(function () {
                AutoComplete("auto_div", "search_text", test_list);
            });
        });
    </script>
</head>
<body>
    <div class="search">
        <input type="text" id="search_text" />
        <div id="auto_div">
        </div>
    </div>
</body>
</html>

大家復(fù)制代碼的時候記得把jquery帶上，不然出錯了又要來罵娘了……

說說主要的思路吧。

首先，把數(shù)據(jù)弄成一個js數(shù)組，然后遍歷這個數(shù)組，每一條數(shù)據(jù)生成一個div，然后添加到auto_div這個div里，還要設(shè)置一下鼠標(biāo)移過高亮，移開恢復(fù)正常，以及點(diǎn)擊的時候自動填上文本框里，還有鼠標(biāo)在網(wǎng)頁點(diǎn)擊的時候列表框會消失——當(dāng)然還有更多細(xì)節(jié)要注意，這里只是舉個例子。怎樣讓文本框里的文本改變的時候就觸發(fā)AutoComplete事件呢？用onchange？錯，onchange是文本框失去光標(biāo)的時候才會觸發(fā)，所以使用keyup事件會好一點(diǎn)。

別的不多說，代碼也不難看懂，原理也很簡單。我要強(qiáng)調(diào)的一點(diǎn)是，像這種智能提示功能可能有些新手會想到用模糊搜索，當(dāng)文本框里的文本改變的時候就去查一下數(shù)據(jù)庫，把返回的數(shù)據(jù)列出來——這是不好的做法，我不說他錯誤因?yàn)檫@樣確實(shí)可行，但是這會給服務(wù)器造成太大的負(fù)擔(dān)，每改變一下文本就查一下數(shù)據(jù)庫，就好像我每要一樣?xùn)|西就要向你問一下一樣，倒不如你一次把它們?nèi)o我，我要什么自己選。當(dāng)然凡事都有兩面性，把所有數(shù)據(jù)一次性查出來的后果是耗內(nèi)存，大數(shù)據(jù)不建議這樣做，這種做法適用于大部分情況，因?yàn)榇蟛糠智闆r都不是大數(shù)據(jù)——大數(shù)據(jù)的，另想它法。

最后說說我的感受：之前面試過前端工程師，那時候人家覺得我還嫩，確實(shí)那時候特嫩?，F(xiàn)在，我在前端的領(lǐng)域正開始慢慢強(qiáng)大起來，雖然公司沒有前端工程師，但是我還是覺得前端很重要，我要合理運(yùn)用前端來解決一些用前端很簡單就能解決的問題，而不是丟給后臺來處理。

在公司做著做著，雖然跟別人學(xué)到的東西不多，但是需求來了，自己想辦法以及在網(wǎng)上找一些解決方案，自己也學(xué)到不少東西。繼續(xù)做，加油！

您可能感興趣的文章: