欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2013年08月22日 15:17:39   作者：  
這篇文章介紹了仿百度輸入框智能提示的js代碼，有需要的朋友可以參考一下

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

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

還是整個(gè)代碼考上來(lái)吧，代碼不長(zhǎng)。考了一下之前忘記是哪位大俠寫(xiě)的東西，他的是使用百度api的，為了簡(jiǎn)單起見(jiàn)，我把數(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">

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

        //自動(dòng)完成
        function AutoComplete(auto, search, mylist) {
            if ($("#" + search).val() != old_value || old_value == "") {
                var autoNode = $("#" + auto);   //緩存對(duì)象（彈出框）
                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è)置每個(gè)節(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)移入高亮，移開(kāi)不高亮
                    newDivNode.mouseover(function () {
                        if (highlightindex != -1) {        //原來(lái)高亮的節(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)容就顯示出來(lái)
                        autoNode.show();
                    } else {               //服務(wù)器端無(wú)內(nèi)容返回 那么隱藏彈出框
                        autoNode.hide();
                        //彈出框隱藏的同時(shí)，高亮節(jié)點(diǎn)索引值也變成-1
                        highlightindex = -1;
                    }
                }
            }

            //點(diǎn)擊頁(yè)面隱藏自動(dòng)補(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ù)制代碼的時(shí)候記得把jquery帶上，不然出錯(cuò)了又要來(lái)罵娘了……

說(shuō)說(shuō)主要的思路吧。

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

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

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

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

相關(guān)文章

最新評(píng)論