JS小案例_搜索候选（联想）/用户名是否可用

最新推荐文章于 2024-05-03 11:47:20 发布

sunnyday.qiu

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量144

点赞数

分类专栏： JS 文章标签： javascript jquery ajax

本文链接：https://blog.csdn.net/changyeyu_/article/details/106994307

版权

JS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

知识点

onkeyup() 搜索框事件绑定 
$.ajax异步请求服务器数据
提示框的展示与隐藏
选中提示框的内容，页面跳转或内容赋值到搜索框

实现代码（前端）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户搜索</title>
    <style type="text/css">
        .content {
            width: 643px;
            margin: 100px auto;
            text-align: center;
        }

        input[type='text'] {
            width: 530px;
            height: 40px;
            font-size: 14px;
        }

        input[type='button'] {
            width: 100px;
            height: 46px;
            background: #38f;
            border: 0;
            color: #fff;
            font-size: 15px
        }

        .show {
            position: absolute;
            width: 533px;
            /*height: 100px;*/
            border: 1px solid #999;
            border-top: 0;
            display: none;
        }
    </style>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<form autocomplete="off">
    <div class="content">
        <img src="img/logo.jpg">
        <br/><br/>
        <input type="text" id="username">
        <input type="button" value="搜索一下">
        <!--用于显示联想的数据-->
        <div id="show" class="show"></div>
    </div>
</form>
</body>
<script>
    //1.为用户名输入框绑定鼠标点击事件
    $("#username").keyup(function () {
        //2.获取输入的用户名
        let username = $("#username").val().trim();

        //3.判断用户名是否为空
        if (username == null || username === "") {
            //4.如果为空，将联想框隐藏
            $("#show").hide();
            return;
        }

        $.post(
            "user",
            "username=" + username,
            function (data) {
                if (data != null && data !== "" && data != "[]") {
                    let showMsg = "";
                    $.each(data, function (i, e) {
                        showMsg += "<div>" + e.name + "</div>";
                    });
                    $("#show").html(showMsg);
                    $("#show").show();
                    $("#show div").click(change);
                }
            },
            "json"
        )
        //
        //     //5.如果不为空，发送AJAX请求。并将数据显示到联想框
        //     $.ajax({
        //         //请求的资源路径
        //         url: "user",
        //         //请求参数
        //         data: {"username": username},
        //         //请求方式
        //         method: "POST",
        //         //响应数据形式
        //         dataType: "json",
        //         //请求成功后的回调函数
        //         success: function (data) {
        //             if (data != null && data != "") {
        //                 //将返回的数据显示到show的div
        //                 let names = "";
        //                 for (let i = 0; i < data.length; i++) {
        //                     names += "<div>" + data[i].name + "</div>";
        //                 }
        //                 $("#show").html(names);
        //                 $("#show").show();
        //             }
        //         }
        //     });
    });

    function change() {
        $("#username").val($(this).html());
        $("#username").keyup();
    }
</script>
</html>

服务器实现

基本的接收前端数据，处理逻辑，访问数据库

sunnyday.qiu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS小案例_搜索候选（联想）/用户名是否可用

知识点onkeyup() 搜索框事件绑定 $.ajax异步请求服务器数据提示框的展示与隐藏选中提示框的内容，页面跳转或内容赋值到搜索框实现代码（前端）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>用户搜索</title> <style type="text/css"> .cont
复制链接

扫一扫