【JavaWeb】前端input输入框+后台查询+input框自动提示相关信息（类似搜索框的功能） |
您所在的位置：网站首页 › 搜索前端界面怎么设置 › 【JavaWeb】前端input输入框+后台查询+input框自动提示相关信息（类似搜索框的功能） |
【JavaWeb】前端input输入框+后台查询+input框自动提示相关信息（类似搜索框的功能）
|
【代码背景】 最近遇到一个需求，用户提交特定信息，输入姓名可以自动带出这个人的相关信息，展示一个提示框，并自动填充到相应的输入框内。这个功能的实现其实跟搜索框很像，输入关键词，下拉框提示相关信息，所以实现思路也是基于搜索框写的。 这里的demo写了一个很简单的 [姓名]、[生日]、[星座] 的提交页面，输入姓名，后台查询返回结果展示到提示框里，用户点击后可以自动把对应的信息填充到控件里。
【演示效果】
【开发工具】
移动端UI框架 - JQuery WeUI 【技术点】 #1-> 标签的propertychange监听事件 获取输入框的值后通过ajax去后台StarInfoServlet查询相关信息，返回前端拼接到提示框的HTML中 $('#regName').bind('input propertychange', function (event) { const text = $("#regName").val(); // 获取注册姓名 const reg = new RegExp("[\\u4E00-\\u9FFF]+", "g"); //验证输入的内容是中文字符 if (reg.test(text)) { // 去后台Servlet查询和输入名称相关的itemlist $.ajax({ data: {reg_name: text}, type: "post", url: "StarInfoServlet", dataType: "json", beforeSend: function () { }, success: function (dataArray) { // 接收从后台传值来的数据，处理后拼接到提示框itemlists的HTML中 }, error: function (e) { alert("ajax发生错误！" + e.status); }, complete: function () { // 提示框根据内容自动搜索展示 $('.item').each(function () { var $self = $(this); var flag = $self.text().search(text) if (flag > -1) { $self.css("display", ""); } else { $self.css("display", "none"); } }); } }); } });#2-> 当input输入框失去焦点时，清除提示框 input失去焦点的监听事件是通过blur()实现的，但是由于提示框的单个item是标签，通过onclick()完成赋值操作，而blur()事件和onclick()会发生冲突。解决冲突的办法是，通过监听事件的className属性单独判断，过滤掉绑定了onclick事件的标签。 item对应的标签 
张艺兴;;1991-10-07 天秤座demo提示框里单独的item是标签绑定了onclick事件pick()，class值是“weui-cell weui-cell_access item”，在blur()里需要把这个过滤掉。 $("#regName").blur(function (e) { // console.log(e.relatedTarget.className); // 解决input.blur()事件与onclick的冲突问题 if (e.relatedTarget && typeof e.relatedTarget.className != null && e.relatedTarget.className == 'weui-cell weui-cell_access item') { return false; } else { $("#itemlist").css("display", "none"); } });#3-> input输入框的样式变化，红色警告变绿色正常 input输入框的初始状态是红色警告
注意这里加了两个id属性
当用户点击提示框的item时，修改 [姓名] 框的样式，红色警告变绿色正常 // 去掉红色提示 $("#font_tips").removeClass("weui-cell_warn"); // 后缀小图标 红色-> 绿色小勾勾 $("#icon_tips").removeClass("weui-icon-warn"); $("#icon_tips").addClass("weui-icon-success");
当用户再次点击 [姓名] 框输入时，又再次变成了红色警告状态 // 增加红色提示 $("#font_tips").addClass("weui-cell_warn"); // 后缀小图标 绿色-> 红色小勾勾 $("#icon_tips").removeClass("weui-icon-success"); $("#icon_tips").addClass("weui-icon-warn");【完整代码】 #1-> 数据准备，新建UserInfo表
#2-> index.jsp 页面 引入相关JS、CSS test for honey //当页面开始加载的时候进行一系列初始化工作 $(document).ready(function () { $('.item').css("display", "none"); $("#itemlist").css("display", "none"); });采用WeUI样式，写input控件 Registration Infomation 姓名 生日 星座写对应的函数 // 根据输入框的内容，自动提示相关内容 $('#regName').bind('input propertychange', function (event) { // 设置【姓名】框的样式 // 增加红色提示 $("#font_tips").addClass("weui-cell_warn"); // 后缀小图标 绿色-> 红色小勾勾 $("#icon_tips").removeClass("weui-icon-success"); $("#icon_tips").addClass("weui-icon-warn"); // 获取注册姓名 const text = $("#regName").val(); // 如果姓名输入框为空，清空提示信息 if (text === "") { console.log("当前输入框为空！"); $('.item').css("display", "none"); $("#itemlist").css("display", "none"); } else { $("#itemlist").css("display", ""); //打开itemlist的div域 $('.item').css("display", "none"); //清空所有的items 不显示 // ----------表单验证通过之后--------- const reg = new RegExp("[\\u4E00-\\u9FFF]+", "g"); //验证输入的内容是中文字符 if (reg.test(text)) { // 去后台Servlet查询和输入名称相关的itemlist $.ajax({ data: { reg_name: text }, type: "post", url: "StarInfoServlet", dataType: "json", beforeSend: function () { $.showLoading("正在查询中..."); // 打开loading }, success: function (dataArray) { $.hideLoading(); // 关闭loading console.log("------------dataArray----------"); console.log(dataArray); let itemlists = dataArray; let itemlistHtml = ""; // 循环取dataArray--拼接HTML字符串 for (let i = 0; i < itemlists.length; i++) { const username = itemlists[i].username; const birthdate = itemlists[i].birthdate; const constellation = itemlists[i].constellation; itemlistHtml += "\n" + " \n" + "![\"\"](\"resources/img/flower_2.png\") \n" +
" \n" +
" \n" +
" " + itemlists[i].username + ";;" + itemlists[i].birthdate + " \n" + " \n" + " " + itemlists[i].constellation + "\n" + " "; } // console.log("-----------itemlistHtml---------") // console.log(itemlistHtml); // HTML赋值到 $("#items").html(itemlistHtml); }, error: function (e) { alert("ajax发生错误！" + e.status); }, complete: function () { $('.item').each(function () { var $self = $(this); var flag = $self.text().search(text) if (flag > -1) { $self.css("display", ""); } else { $self.css("display", "none"); } }); } }); } } }); // input输入框失去焦点时，清除提示框 $("#regName").blur(function (e) { // console.log(e.relatedTarget.className); // 解决input.blur()事件与onclick的冲突问题 if (e.relatedTarget && typeof e.relatedTarget.className != null && e.relatedTarget.className == 'weui-cell weui-cell_access item') { return false; } else { $("#itemlist").css("display", "none"); } }); // 点击item把item赋值到输入框内 function pick(username, birthdate, constellation) { console.log("val: " + username + " " + birthdate + " " + constellation); // 赋值到对应的输入框 $('#regName').val(username); $('#birthdate').val(birthdate); $('#constellation').val(constellation); // 设置【姓名】框的样式 // 去掉红色提示 $("#font_tips").removeClass("weui-cell_warn"); // 后缀小图标 红色-> 绿色小勾勾 $("#icon_tips").removeClass("weui-icon-warn"); $("#icon_tips").addClass("weui-icon-success"); // 清空提示框的内容 $('.item').css("display", "none"); $("#itemlist").css("display", "none"); }Bug记录 #1-> weui-cells_form 会导致 weui-cell__ft 占用空间变成0 使用了WeUI的列表样式，如下图所示
张艺兴;;1991-10-07 天秤座
华晨宇;;1990-02-07 水瓶座
如果加上 请注意，占用空间会变成0！
参考 weui的页面内搜索功能实现demo https://blog.csdn.net/qq_40249994/article/details/80890453 小程序搜索弹出搜索内容功能（模糊查询） https://www.jianshu.com/p/2c3563f7e42e weui 搜索 weui-search-bar https://blog.csdn.net/weixin_42861240/article/details/84665656 Js/jQuery实时监听input输入框值变化 https://www.cnblogs.com/jxldjsn/p/10917092.html jquery实时监听输入框值变化 https://www.iteye.com/blog/570109268-2429504 jQuery实时监听input value https://blog.csdn.net/u010865136/article/details/81708963 |
这里的天秤座 占用了63.75x29px的空间大小
【本文地址】