JQuery的Autocomplete自动补全

最新推荐文章于 2022-09-12 16:07:22 发布

ooyyaa6561

最新推荐文章于 2022-09-12 16:07:22 发布

阅读量465

点赞数 1

分类专栏：技术文章标签： jquery ajax

本文链接：https://blog.csdn.net/ooyyaa6561/article/details/120363877

版权

技术专栏收录该内容

53 篇文章 2 订阅

订阅专栏

用户界面录入，从后台数据库查询匹配数据，以下拉框方式显示在下方，点击后内容进入文本框，老功能，翻出来备忘

1、使用JQuery-UI的Autocomplete自动补全
官方网址：https://jqueryui.com/autocomplete/#remote

2、动态数据
数据需要从后台实时查询返回，不是静态的
网上查了资料，总是这里那里不适配，所以完整写一下

前台

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script type="text/javascript">
         $( function() {
             $( "#deviceName" ).autocomplete({
                source: function (request, response) {                    
                    $.ajax( {
                        url: "${ctx}/device/device/device/jsondata",  //这是我后台返回数据的链接地址
                        dataType: "json",
                        data: {
                            deviceName: request.term     
                            //查询参数，deviceName，是传给后台做查询的查询条件，request.term 是固定字段，不要改，写这个就是把文本框内的值塞到变量deviceName里作为参数传给后台
                        },
                        success: function( data ) {
                            response($.map( data, function (v,i) {
                                return {
                                    value: v.deviceName,
                                    id: v.id
                                    //data代表后台返回的字符串，json格式见下面，其中v代表json里的每条数据，每条数据两个字段，一个deviceName，一个id，赋值给文本框的下拉框控件，其实id赋值不赋值意义不大，最后拿到的都是value，value和id是固定字段，不要改
                                }
                            }));
                        }
                    });
                },
                minLength: 2
            });
        } );
</script>
<body>
 <input id="deviceName" name="deviceName" />
</body>

后台JSON
springboot的后台

@ResponseBody
@RequestMapping(value = "jsondata")
public String jsondata(String deviceName, HttpServletRequest request, HttpServletResponse response, Model model) {

        List<Device> list = 从后台通过deviceName查找到数据列表;
        //把数据转换成json字符串再返回去
        String json= "[";
        for(Device bean:list){
            json=json + "{\"id\":\""+bean.getId()+"\",\"deviceName\":\""+bean.getDeviceName()+"\"},";
        }
        if(json.length()>1)json=json.substring(0,json.length()-1);
        json = json +"]";
        return json;
    }

3、问题

由于jeeplus本身系统的Jquery是版本v3.3.1 ，Autocomplete使用版本jquery-1.12.4.js，使用这个版本jeeplus原有系统会出问题。只能使用v3.3.1 版本，但是问题就是下拉框的错位，如图所示
在这里插入图片描述
解决办法：

用jquery-migrate做向下兼容，到网站上找到你的高版本对应链接
https://www.bootcdn.cn/jquery-migrate/3.3.1/，比如我是3.3.1，我用的就是这个版本的jquery-migrate，复制链接到你前台界面里，如

<script src="https://cdn.bootcdn.net/ajax/libs/jquery-migrate/3.3.1/jquery-migrate.min.js"></script>

然后再运行，发现啥也不用改，位置就正常了，非常简单，也可以参考下面链接
jquery-migrate插件用法

ooyyaa6561

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery的Autocomplete自动补全

用户界面录入，从后台数据库查询匹配数据，以下拉框方式显示在下方，点击后内容进入文本框，老功能，翻出来备忘1、使用JQuery-UI的Autocomplete自动补全官方网址：https://jqueryui.com/autocomplete/#remote2、动态数据数据需要从后台实时查询返回，不是静态的网上查了资料，总是这里那里不适配，所以完整写一下前台 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes
复制链接

扫一扫