文本框模糊搜索显示隐藏弹出框

2Hhhhhh

已于 2022-09-04 17:43:32 修改

阅读量459

点赞数 3

分类专栏： html javascript 文章标签： javascript 前端 html

于 2022-09-04 17:41:22 首次发布

本文链接：https://blog.csdn.net/weixin_41595700/article/details/126692146

版权

html 同时被 2 个专栏收录

12 篇文章 1 订阅

订阅专栏

javascript

12 篇文章 0 订阅

订阅专栏

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>模糊查询搜索框</title>
    <meta charset="UTF-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

    <style>
        .search {
            left: 0;
            position: relative;
        }

        /* 弹出框样式 */
        #auto_div {
            height: 140px;
            display: none;
            width: 873px;
            border: 1px solid #cccccc;
            background: #FFF;
            margin: auto;
            position: relative;
            overflow-y: auto;
            overflow-x: hidden;
        }

        /* 输入框样式 */
        .ccjgd-seach {
            /*border: 1px solid #cccccc;*/
            width: 875px;
            height: 40px;
            line-height: 40px;
            margin: auto;
            position: relative
        }

        /* 放大镜图标样式 */
        .ccjgd-seach .fdj {
            position: absolute;
            right: 15px;
            top: 14px
        }
    </style>
</head>
<body>
<div class="search">
    <div class="ccjgd-seach">
        <input style="width: 869px;height: 34px" type="input" autocomplete="off" id="search_text" placeholder="请输入问题..."/>
        <img src="fdj.png" class="fdj">
    </div>
    <div id="auto_div">
    </div>
</div>
<script type="text/javascript">
    //测试数据，可以改成你ajax请求数据库的值
    var testTextList = ["今", "今晚", "今晚吃", "今晚吃什么","今晚吃火锅","今晚吃火锅喝奶茶"];

    //智能补全
    function AutoComplete(auto, search, list) {
        var autoNode = $("#" + auto);//获取弹出框对象
        var completeList = new Array(); //定义数组存弹出框的值
        var n = 0;
        var old_value = $("#" + search).val();
        for (var i in list) {
            if (list[i].indexOf(old_value) === 0) { //初始循环赋值到数组以便后续操作
                completeList[n++] = list[i];
            }
        }

        if (completeList.length == 0) { //数组为空不显示弹出框
            autoNode.hide()
            return;
        }

        autoNode.empty();//清空上次的记录
        for (var i in completeList) {
            var wordNode = completeList[i]; //弹出框里的每一条内容
            var newDivNode = $("<div>").attr("id", i) //设置每个节点的id值
            newDivNode.attr("style", "margin-left:0px;width:856px;font:14px/25px arial;height:25px;padding:0 8px;cursor:pointer;");//设置每条记录样式
            newDivNode.html(wordNode).appendTo(autoNode);//追加到弹出框
            // 鼠标移入高亮，移开不高亮
            newDivNode.mouseover(function () {
                $(this).css("background-color", "#ebebeb");
            });
            newDivNode.mouseout(function () {
                $(this).css("background-color", "white");
            });
            //鼠标点击文字上屏
            newDivNode.click(function () {
                autoNode.hide();
                //取出高亮节点的文本内容
                var comText = $(this).text();
                //赋值给文本框
                $("#" + search).val(comText);
            });
            //如果返回值有内容就显示出来
            autoNode.show();
        }
        //点击文本框以外部分隐藏弹出框
        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 () {
        //文本框焦点触发
        $("#search_text").focus(function () {
            AutoComplete("auto_div", "search_text", testTextList);
        });
        //文本框输入触发
        $("#search_text").keyup(function () {
            AutoComplete("auto_div", "search_text", testTextList);
        });
        //点击放大镜查询 可改成你要跳转的操作
        $(".fdj").click(function () {
            window.location.href = "https://www.baidu.com/s?wd=" + $("#search_text").val();
        });
    });
</script>
</body>
</html>

效果图：