有关个人对jquer.autocomplete.js和ajax的组合使用的记录

最新推荐文章于 2024-08-28 08:22:25 发布

借东西的小人儿

最新推荐文章于 2024-08-28 08:22:25 发布

阅读量153

点赞数

文章标签： javascript jquery html5

本文链接：https://blog.csdn.net/m0_45101736/article/details/115710229

版权

开始是想写一个可以自动填充的输入框，网上查询后发现可以用jquery.autocomplete.js
实现填充，还有其他类似的jquery UI库，没有细看。
本篇文章，主要是写给自己看的防止忘记，别的问题欢迎讨论，也接受批评。毕竟也是个小白。
1.首先是先插入相关的文件在这里插入代码片

   <link rel="stylesheet" href="../js/jquery-ui-1.12.1.custom/jquery-ui.css">
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/jquery-ui-1.12.1.custom/jquery-ui.js"></script>

2.我是用的ssm框架，所以写了一个模糊查询方法，这里就是
注解方式的模糊查询要这样写：

 @Select("select filmname from film where filmname like concat('%',#{filmname},'%')")

3.重要的就是使用ajax来实现输入框的即时信息获取：

 $("#tags").autocomplete({
            source: function(request,response){//其中request是输入框中输入的值（request.term）获取，response是一个自定义函数
                $.post({
                    url:"../film/findByFilmname1",
                    data:{
                        "filmname":request.term
                    },
                    success:function (returndata){   //returndata是后端返回的值
                        /*console.log(returndata);*/
                        response($.map(returndata.data, function (item) {  //jquery的$.map()方法自己去菜鸟看，这里的returndata.data这样写下面图片解释。
                           /* console.log("这个item是"+item)*/
                            console.log(item.filmname)
                            /*console.log(item.filmname)*/
                            return {
                                value:item.filmname  //给value赋值给下面的select方法使用
                            };
                        }));
                    }
                });
            },
            minLength:1,
            select:function(event,ui){ //select就是输入框中，当你输入一个字符后，下面出现的选择标签。
                $("#tags").val(ui.item.value); //此处的value就是上方的被赋值后的value；这句的意思是当你用鼠标选则了下方出现的标签后，将标签内容赋值给输入框。
            }
        });

1.下面，上图解释：
在下图打印出来之后就可以知道在这里插入图片描述 2.第二组图片：
3.第三组图片：
4.最后结果图：
5.完整代码：

<head>
    <meta charset="UTF-8">
    <title>测试autoacomplete</title>
    <link rel="stylesheet" href="../js/jquery-ui-1.12.1.custom/jquery-ui.css">
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
</head>
<body>
<div class="ui-widget">
    <label for="tags">标签：</label>
    <input id="tags" type="text">
    <button id="btn">提交</button>
</div>

<script>
        $("#tags").autocomplete({
            source: function(request,response){
                $.post({
                    url:"../film/findByFilmname1",
                    data:{
                        "filmname":request.term
                    },
                    success:function (returndata){
                        console.log(returndata);
                        response($.map(returndata.data, function (item) {
                            /*console.log(item)*/
                            console.log(item.filmname)
                            return {
                                value:item.filmname
                            };
                        }));

                    }
                });
            },
            minLength:1,
            select:function(event,ui){
                $("#tags").val(ui.item.value);
            }
        });
</script>

</body>
</html>