仿百度输入框智能提示的js代码

网络编程 2024/11/16 佚名

3 1 2

最近客户需求老是变更，不过有些是因为客户催得急，我没有那么快能完成，所以先做了一个雏形给他们，后来再慢慢改。比如雏形那里我做了一个下拉列表给他们，事实上他们的数据有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事件会好一点。

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

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

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

输入框,智能,提示

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“仿百度输入框智能提示的js代码”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

仿百度输入框智能提示的js代码

基于jquery实现的定时显示与隐藏div广告的实现代码

JAVASCRIPT函数作用域和提前声明分享

评论“仿百度输入框智能提示的js代码”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

仿百度输入框智能提示的js代码

基于jquery实现的定时显示与隐藏div广告的实现代码

JAVASCRIPT函数作用域和提前声明 分享

评论“仿百度输入框智能提示的js代码”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

JAVASCRIPT函数作用域和提前声明分享

RTX 5090要首发性能要翻倍！三星展示GDDR7显存