搜索联想不仅仅需要监听输入框,写入联想数据。还需要监听空白事件,即点击空白处隐藏;点击联想选项写入输入框;同时还要阻止联想盒子的点击冒泡。

搜索联想不仅仅需要监听输入框,写入联想数据。还需要监听空白事件,即点击空白处隐藏;点击联想选项写入输入框;同时还要阻止联想盒子的点击冒泡。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .form-control {
            border-radius: 0;
            box-shadow: none;
            border-color: #d2d6de;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            width: 170px;
            height: 28px;
            padding: 6px 12px;
            font-size: 13px;
            line-height: 1.42857143;
            color: #555555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
        }

        .form-control:focus {
            border-color: #4397fd;
            box-shadow: none;
        }

        .recommend {
            width: 194px;
            margin-top: -10px;
            background: #fafafa;
            z-index: 10000;
            position: absolute;;
            border: 1px #ccc solid;
            border-top: 0;
            display: none;
        }

        .recommend span {
            width: 182px;
            padding: 4px 0px 4px 12px;
            display: inline-block;
            cursor: pointer;

        }

        .recommend span:hover {
            color: #0051bb;
            background: #f2f2f2;

        }
    </style>
    <script crossorigin="anonymous" src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
</head>
<body>

<div>
    <input class="form-control" type="text" placeholder="请输入标准申请人" name="applicant_name">
    <span class="btn btn-success btn-embossed">检索</span>
</div>


<div class="   recommend "></div>
<script>
    //联想:
    $("input[name='applicant_name']").keyup(function () {
        this.value = this.value.replace(/\s+/g, '');

        let _html = "";
        res = ['111111', '222222'];
        for (let i = 0; i < res.length; i++) {
            _html += "<span onclick='up_text(this)'>" + res[i] + "</span>";
        }
        $(".recommend").show();
        $(".recommend").html(_html);


        // $.post('./guard/recommend.html', {applicant_name:  this.value}, function (res) {
        //	let _html="";
        //	let len = res.data.length > 5 ? 5 : res.data.length;
        //	for (let i=0;i<len;i++){
        //		_html+="<span onclick='up_text(this)'>"+res.data[i]+"</span>";
        //	}
        //	$(".recommend").show();
        //	$(".recommend").html(_html);
        //
        //},"json");
    });

    //阻止冒泡到body
    $(".recommend").click(function (e) {
        e.stopPropagation();
    });

    //点击页面隐藏联想
    $("body").click(function () {
        $(".recommend").hide();
    });

    //点击文本写入input
    function up_text(self) {
        $("input[name='applicant_name']").val($(self).text());
        $(".btn.btn-success").click();
    }


</script>
</body>
</html>
Licensed under 京ICP备17003353号-3