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

笔者是一个前端菜鸡，所以想模仿制作一个百度搜索框用到自己的项目，通过找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>");//将数据放入liline.append(data);//li点击事件line.click(function () {//测试console.log(this.textContent);//将点击的该li的数据放入输入栏searchTxt.val(this.textContent);//点击后关闭下拉框searchContent.css("display","none");});//ul添加 li集合ul.append(line);});//下拉框添加 ulsearchContent.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;}

效果展示

输入内容

鼠标离开

再次点击输入框

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

jquery 搜索框的功能实现
http://www.cnblogs.com/linjiqin/archive/2011/03/18/1988464.html jquery搜索框功能的实现, 1.输入关键字,展示匹配的下拉列表 2. ...
jquery搜索框效果，搜索，请输入关键字
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
html5搜索框在最右侧,CSS3,HTML5和jQuery搜索框集锦
添加搜素框或网站搜索功能是为了方便用户能够轻松.快捷地找到自己需要的信息.因此,在网站中添加一个搜索框已经成为网页设计的主流元素之一.添加一个搜索框到网站会使得用户界面更加友好,也能帮助用户轻松愉快地 ...
jQuery搜索框自动补全功能插件实现-autocomplete.js
最近用nodeclub实现股票的输入关键字自动补全股票信息进行搜索功能,原先用jQuery-ui,结果jQuery-ui库太大,所以考虑用其他插件,最终选择使用autocomplete.js,控件简单 ...
jquery 搜索框自动提示
2019独角兽企业重金招聘Python工程师标准>>> 使用jquery-ui中特性 https://jqueryui.com/autocomplete/ http://www.ru ...
淘宝购物车页面智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
web搜索框的制作（必应）
前两天没事突然对搜索来了兴趣,我一直在想搜索框中我们输入一些字或者字母,为何下面就会有一些自动补齐的相关搜索,比如我在搜索输入框中输入一个字母e,下面就会出现饿了么,e租宝,ems等相关的搜索链接.然 ...
HTML搜索框的制作过程
1.搜索框的构成 input标签和button标签我的理解应该就类似于行内块元素,可以设置宽高,但同时又不独占一行 placeholder(占位文本)就是输入框一开始默认显示的文本 <div ...
ajax实现搜索提示源码,Jquery实现搜索框提示功能示例代码
博客的前某一篇文章中http://www.jb51.net/article/35175.htm写过一个用Ajax来实现一个文本框输入的提示功能.最近在一个管理项目的项目中,使用后发现,真的反应很慢,数 ...

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

html

效果展示

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

最新文章

热门文章