【橙子】AjaxJquery--制作一个类似百度的搜索方式

最新推荐文章于 2024-09-24 11:46:44 发布

CCNetCore

最新推荐文章于 2024-09-24 11:46:44 发布

阅读量177

点赞数

分类专栏： Ajax 文章标签： ajax

本文链接：https://blog.csdn.net/QAQQVQQTQ/article/details/107672301

版权

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

作者的话
原谅我，第一次接触这玩意儿
AJAX
Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

Jauery
jQuery 是一个 JavaScript 库。
制作了一个类似于百度的高级搜索功能，边输边加载
效果展示
已上传服务器
在这里插入图片描述

<!DOCTYPE html>
@{
    Layout = "";
}

<html>
<head>
    <meta charset="utf-8">
    <title>AJAX高级搜索</title>
    <script src="~/Scripts/jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>

        $(function () {
            //1.页面加载之后，找到文本框的内容对它触发一个事件
            $("#txtTitle").keyup(function () {
                //2.获取到文本框的内容,注意去空格
                var title = $.trim($("#txtTitle").val());
                //3.获取到输入的内容之后，就要通过ajax传给后台
                $.post("/Home/Test", { "title": title }, function (data) {
                    if (title == "") {
                        $("#dtitles").hide();
                    }
                    else {
                        //显示展示div,把它清空
                        $("#dtitles").show().html("");
                        if (data == "") {
                            $("#dtitles").hide().html("");
                        }
                        else {
                            $("#dtitles").append(data);

                            //点击输入框复制
                            $("li").click(function () {
                                $("#txtTitle").val($(this).text());
                                $("#dtitles").hide().html("");
                            });

                            //4.鼠标移上去之后，加一个背景
                            $("li").hover(function () {
                                $(this).addClass("li1");
                            }, function () {
                                $(this).removeClass("li1");
                            });
                        }
                    }
                });
            });


        });
    </script>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        #searchbox {
            height: 46px;
            width: 624px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -300px;
            margin-left:-322px;
        }



        #txtTitle {
            height: 46px;
            width: 524px;
            line-height: 35px;
            border: solid 1px #4791FF;
            float: left;
            border-radius: 5px 0 0 5px
        }

        #btnSelect a {
            width: 100px;
            height: 46px;
            background: #167ED9;
            display: block;
            line-height: 37px;
            color: #ffffff;
            text-align: center;
            line-height: 50px;
            float: left;
            border-radius: 0 5px 5px 0
        }

        a:link {
            text-decoration: none;
            list-style-type: none;
        }

        a:hover {
            cursor: pointer;
            list-style-type: none;
        }

        #dtitles {
            width: 524px;
            height: 300px;
            border: solid 1px #CCCCCC;
            display: none;
            font-size: 12px;
            
        }

        .li1 {
            background: #F0F0F0;
        }

        ul li {
            list-style: none;
            margin-left: 5px;
        }
    </style>
</head>
<body>

    <div id="searchbox">

            <div style="margin-left:15%;"><img style="height: 206px; width: 432px" src="~/bg.png" /></div>

            
        <div><input type="text" id="txtTitle"></div>
        
        <div id="btnSelect"><a href="javascript:;">百度</a></div>
        <div id="dtitles"></div>
    </div>
    

</body>
</html>