笔者是一个前端菜鸡&＃xff0c;所以想模仿制作一个百度搜索框用到自己的项目&＃xff0c;通过找csdn文章B站视频 终于凑出了一个勉强像样的搜索框。
html
<!DOCTYPE html>
<html lang&＃61;"en" xmlns&＃61;"http://www.w3.org/1999/xhtml" xmlns:th&＃61;"http://www.thymeleaf.org">
<head><meta charset&＃61;"utf-8"><meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1, maximum-scale&＃61;1"><title>图书搜索页面</title><link rel&＃61;"stylesheet" href&＃61;"/css/style.css"><script type&＃61;"text/Javascript" src&＃61;"/js/jquery-3.1.1.min.js"></script><!--搜索图标需要的js--><script src&＃61;"/js/fontawesome.js" ></script><style type&＃61;"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&＃61;"search-box"><!--输入栏--><input id&＃61;"search-txt" class&＃61;"search-txt" name&＃61;"search-txt" type&＃61;"text" placeholder&＃61;"请输入书名" /><!--搜索btn--><a id&＃61;"search-btn" class&＃61;"search-btn" href&＃61;"#"><i class&＃61;"fas fa-search"></i></a></div><!--下拉内容块--><div class&＃61;"searchContent" id&＃61;"searchContent"></div>
</body><script type&＃61;"text/Javascript">$(function(){const searchTxt &＃61; $("#search-txt");const searchContent &＃61; $("#searchContent");searchTxt.keyup(function () {var keyword &＃61;searchTxt.val();var kw &＃61; keyword.trim();if (kw!&＃61;&＃61;"" && kw!&＃61;null){$.get(&＃39;search/keySearch&＃39;,{kw:kw},function(result){if (result &＃61;&＃61; null || result &＃61;&＃61;&＃61; "") {console.log("没数据");searchContent.css("display", "none");} else{console.log("有数据"&＃43;result);var ul &＃61; $("");$.each(result, function(index, data) {searchContent.html("");var line&＃61;$("");line.append(data);line.click(function () {console.log(this.textContent);searchTxt.val(this.textContent);searchContent.css("display","none");});ul.append(line);});searchContent.append(ul).show();}},&＃39;json&＃39;);}});});$(function () {const searchTxt &＃61; $("#search-txt");const searchContent &＃61; $("#searchContent");searchTxt.click(function () {var word &＃61;searchTxt.val();var wd &＃61; word.trim();if (wd!&＃61;&＃61;""&&wd!&＃61;null){searchContent.show();}});searchContent.mouseleave(function () {searchContent.css("display","none");});})</script></html>
java mvc 测试片段
&＃64;ResponseBody&＃64;RequestMapping("/search/keySearch")public String keySearch(&＃64;RequestParam("kw") String kw){List<String>list &＃61; new ArrayList<>();System.out.println(kw);list.add("张三丰");list.add("张无忌");list.add("李清照");list.add("旭旭宝宝");list.add("csdn");list.add("ajax教程");String a &＃61; JSON.toJSONString(list);return a;}
效果展示
输入内容
鼠标离开
再次点击输入框
京公网安备 11010802041100号