记一次辛酸的ajax+jquery搜索框制作过程

最新推荐文章于 2021-08-05 12:50:32 发布

FatalMaker

最新推荐文章于 2021-08-05 12:50:32 发布

阅读量182

点赞数

分类专栏： javascript 文章标签： JAVA HTML JS AJAX

本文链接：https://blog.csdn.net/qq_34316967/article/details/103451217

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

笔者是一个前端菜鸡，所以想模仿制作一个百度搜索框用到自己的项目，通过找csdn文章B站视频终于凑出了一个勉强像样的搜索框。

html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>图书搜索页面</title>
    <link rel="stylesheet" href="/css/style.css">
    <script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script>
	<!--搜索图标需要的js-->
    <script  src="/js/fontawesome.js" ></script>
	<style type="text/css">       
	.search-box{
		padding-left: 25%;
		padding-top: 10px;
		width:350px ;
		height: 40px;
		border-radius: 40px;
	}

	.search-txt{
		height: 40px;
		border:none;
		border-radius:5px;
		background: white;
		outline: none;
		float: left;
		padding: 0;
		color:black;
		font-size: 16px;
		transition: 0.4s;
		line-height: 40px;
		width: 280px;
	}

	.search-btn{
		color:#e84118;
		float: right;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: #2f3640;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: 0.4s;

	}

	.search-box:hover > .search-btn{
		background: white;
	}

	.searchContent{
		margin-left: 24.94%;
		width:279px;
		border:1px solid #2f3640;
		margin-top: -5px;
		display: none;
		background:white;
	}
	.searchContent ul{
		width:279px;
		background:white;
	}

	.searchContent ul li{
		color:black;
		width:279px;
		line-height:30px;
		background:white;
		list-style: none;
		cursor: pointer;
		border-bottom:1px  #B2B2B2;
	}
 
	</style>  
</head>
<body>    
			<!--搜索框-->
	  <div class="search-box">
			<!--输入栏-->
            <input id="search-txt" class="search-txt" name="search-txt" type="text"  placeholder="请输入书名"  />
            <!--搜索btn-->
			<a id="search-btn" class="search-btn" href="#">
                <i class="fas fa-search"></i>
            </a>
        </div>
			<!--下拉内容块-->
        <div class="searchContent" id="searchContent">

        </div>
</body>

<script type="text/javascript">
    //JavaScript代码区域

    $(function(){
		//jq类选择器 输入栏对象
        const searchTxt = $("#search-txt");
		//下拉内容块对象
        const searchContent = $("#searchContent");
		//输入栏btn弹起事件
        searchTxt.keyup(function () {
			//获取输入栏内容
            var keyword =searchTxt.val();
			//去空白
            var kw = keyword.trim();
			//判断内容是否为空
            if (kw!=="" && kw!=null){
            //ajax get请求   路径         关键字    结果
                $.get('search/keySearch',{kw:kw},function(result){
                    if (result == null || result === "") {
						//打印测试
                        console.log("没数据");
						//不显示 下拉框（默认不显示）
                        searchContent.css("display", "none");
                    } else{
                        //遍历结果集
                        console.log("有数据"+result);
						//创建ul对象
                        var ul = $("<ul></ul>");
						//jq遍历
                        $.each(result, function(index, data) {
							//每次遍历清空下拉框，否则数据重叠
                            searchContent.html("");
							//创建li对象
                            var line=$("<li></li>");
							//将数据放入li
                            line.append(data);
							//li点击事件
                            line.click(function () {
								//测试
                                console.log(this.textContent);
								//将点击的该li的数据放入输入栏
                                searchTxt.val(this.textContent);
								//点击后关闭下拉框
                                searchContent.css("display","none");
                            });
							//ul添加 li集合
                            ul.append(line);
                        });
						//下拉框添加 ul
                        searchContent.append(ul).show();
                    }
                },'json');
            }
        });
    });
	
	//下拉框显示
    $(function () {
		//获取输入栏对象
        const searchTxt = $("#search-txt");
		//获取下拉框对象
        const searchContent = $("#searchContent");
		//当点击输入栏，显示下拉框
        searchTxt.click(function () {
            var word =searchTxt.val();
            var wd = word.trim();
            if (wd!==""&&wd!=null){
                searchContent.show();
            }
        });
		//当鼠标离开下拉框，下拉框消失
        searchContent.mouseleave(function () {
            searchContent.css("display","none");
        });
    })
    
</script>

</html>

java mvc 测试片段

 @ResponseBody
    @RequestMapping("/search/keySearch")
    public String keySearch(@RequestParam("kw") String kw){
        List<String>list = new ArrayList<>();
        System.out.println(kw);
        list.add("张三丰");
        list.add("张无忌");
        list.add("李清照");
        list.add("旭旭宝宝");
        list.add("csdn");
        list.add("ajax教程");
        String a = JSON.toJSONString(list);
        return a;
    }