伏龙阁资源网

仿百度输入框智能提示的js代码
站长资源 2024/11/29 佚名
2 0

最近客户需求老是变更，不过有些是因为客户催得急，我没有那么快能完成，所以先做了一个雏形给他们，后来再慢慢改。比如雏形那里我做了一个下拉列表给他们，事实上他们的数据有200多条，用个下拉列表的话很不现实，你能找那么多？而且那个下拉列表该有多长啊？所以很自然的，我想到了百度那个智能提示的功能。

参考了一下之前忘记是哪位大侠写的东西，他的是使用百度api的，为了简单起见，我把数据都定在了js那里，这样看官们容易理解一些。

还是整个代码考上来吧，代码不长。考了一下之前忘记是哪位大侠写的东西，他的是使用百度api的，为了简单起见，我把数据都定在了js那里，这样看官们容易理解一些。
复制代码 代码如下:
<!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="/UploadFiles/2021-04-02/jquery-1.7.2.min.js">    <script type="text/javascript">

        //测试用的数据
        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];   //弹出框里的每一条内容

                    var newDivNode = $("<div>").attr("id", i);    //设置每个节点的id值
                    newDivNode.attr("style", "font:14px/25px arial;height:25px;padding:0 8px;cursor: pointer;");

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

                    //鼠标移入高亮，移开不高亮
                    newDivNode.mouseover(function () {
                        if (highlightindex != -1) {        //原来高亮的节点要取消高亮（是-1就不需要了）
                            autoNode.children("div").eq(highlightindex).css("background-color", "white");
                        }
                        //记录新的高亮节点索引
                        highlightindex = $(this).attr("id");
                        $(this).css("background-color", "#ebebeb");
                    });
                    newDivNode.mouseout(function () {
                        $(this).css("background-color", "white");
                    });

                    //鼠标点击文字上屏
                    newDivNode.click(function () {
                        //取出高亮节点的文本内容
                        var comText = autoNode.hide().children("div").eq(highlightindex).text();
                        highlightindex = -1;
                        //文本框中的内容变成高亮节点的内容
                        $("#" + search).val(comText);
                    })
                    if (carlist.length > 0) {    //如果返回值有内容就显示出来
                        autoNode.show();
                    } else {               //服务器端无内容返回 那么隐藏弹出框
                        autoNode.hide();
                        //弹出框隐藏的同时，高亮节点索引值也变成-1
                        highlightindex = -1;
                    }
                }
            }

            //点击页面隐藏自动补全提示框
            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>

大家复制代码的时候记得把jquery带上，不然出错了又要来骂娘了……

说说主要的思路吧。

首先，把数据弄成一个js数组，然后遍历这个数组，每一条数据生成一个div，然后添加到auto_div这个div里，还要设置一下鼠标移过高亮，移开恢复正常，以及点击的时候自动填上文本框里，还有鼠标在网页点击的时候列表框会消失——当然还有更多细节要注意，这里只是举个例子。怎样让文本框里的文本改变的时候就触发AutoComplete事件呢？用onchange？错，onchange是文本框失去光标的时候才会触发，所以使用keyup事件会好一点。

别的不多说，代码也不难看懂，原理也很简单。我要强调的一点是，像这种智能提示功能可能有些新手会想到用模糊搜索，当文本框里的文本改变的时候就去查一下数据库，把返回的数据列出来——这是不好的做法，我不说他错误因为这样确实可行，但是这会给服务器造成太大的负担，每改变一下文本就查一下数据库，就好像我每要一样东西就要向你问一下一样，倒不如你一次把它们全给我，我要什么自己选。当然凡事都有两面性，把所有数据一次性查出来的后果是耗内存，大数据不建议这样做，这种做法适用于大部分情况，因为大部分情况都不是大数据——大数据的，另想它法。

最后说说我的感受：之前面试过前端工程师，那时候人家觉得我还嫩，确实那时候特嫩。现在，我在前端的领域正开始慢慢强大起来，虽然公司没有前端工程师，但是我还是觉得前端很重要，我要合理运用前端来解决一些用前端很简单就能解决的问题，而不是丢给后台来处理。

在公司做着做着，虽然跟别人学到的东西不多，但是需求来了，自己想办法以及在网上找一些解决方案，自己也学到不少东西。继续做，加油！

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接