jquery的autocomplete用法

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

很帅的程程

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

阅读量843

点赞数 1

分类专栏：前端文章标签： jquery js

本文链接：https://blog.csdn.net/qq_42289636/article/details/105982957

版权

前端专栏收录该内容

4 篇文章 1 订阅

订阅专栏

jQuery Autocomplete 插件根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。通过给 Autocomplete 字段焦点或者在其中输入字符，插件开始搜索匹配的条目并显示供选择的值的列表

前端代码，后台代码随便自己写，返回一个json数据就行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/jquery-ui.min.css">
    <script src="../js/jquery-3.5.0.js"></script>
    <script src="../js/jquery-ui.min.js"></script>
</head>
<body>
<div class="ui-widget">
    <input id="name">
</div>
</body>
<script>
    $(function () {
        /*$('#name').autocomplete({
            // 直接写地址的方式，那么只针对返回的数据为 ["", ""], 如果返回的数据为一个个对象的话
            source:'http://localhost:8080/',
            minLength:1//最低输入的字符数量的要求
        })*/

       $('#name').autocomplete({
           // 如果针对返回的参数是 [{id: 1, company: 'XXX公司'}, {}, {}]
           // cb一个回调函数，回调函数的作用是将数据渲染到下拉框中
           source:function (request,cb) {
                $.ajax({
                    url:"http://localhost:8080/cascade?method=getCompanys",
                    // data:{term:request.term},
                    dataType:'json',
                    type:'get',
                    success:function (_data) {
                        console.log(_data);
                        var  names = [];
                        for (var i = 0; i <_data.length ; i++) {
                            names.push(_data[i].name);

                        }

                        cb(names);
                    }
                })
           },
           minLength:1
       })
    })
</script>
</html>

展现图片
在这里插入图片描述