【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

 采用WeUI样式，写input控件

Registration Infomation


    
    

        
姓名
        

            
        
        

            
        
    

    
    

        

            

        
    

    
    

        
生日
        

            
        
    

    
    

        
星座
        

            
        
    

  写对应的函数

---

Bug记录

#1-> weui-cells_form 会导致 weui-cell__ft 占用空间变成0

使用了WeUI的列表样式，如下图所示

带图标、说明、跳转的列表项

    
        

            
        
        

            
张艺兴  1991-10-07
        
        
天秤座
    
    
        

            
        

            
华晨宇  1990-02-07
        
        
水瓶座
    

 这里的

天秤座

占用了63.75x29px的空间大小

如果加上

 请注意，占用空间会变成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