Jquery.UI.autocomplate

最新推荐文章于 2023-04-08 08:23:38 发布

→→→→

最新推荐文章于 2023-04-08 08:23:38 发布

阅读量203

点赞数

分类专栏： JavaScript/JQuery

本文链接：https://blog.csdn.net/zou_yufei/article/details/106019028

版权

JavaScript/JQuery 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

自动填充输入框：适用数据源数据大，且需要根据输入查询并选择数据的情景。
示例.gif

演示版本

<html>
<head>
    <!--bootstrap css-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.11.0/jquery-ui.min.css" crossorigin="anonymous">

    <!--jquery js-->　　
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>
    <!--bootstrap js-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/jqueryui/1.11.1/jquery-ui.min.js" crossorigin="anonymous"></script>

</head>
<body>
<p>
    <input id="name"/>
</p>

<script type="text/javascript">
    $("#name").autocomplete({
        minLength: 3, //输入3个字符后 再开始匹配
        select: function (event, ui) {
            console.log(JSON.stringify(ui));
            console.log($(event.target).val()); //获取输入框对象
        },
        source: function (request, response) {
            // 这里可以用ajax调用接口，查询和输入匹配的结果  request.term可以获取文本框输入的内容
            var result = [
                {label: '你好', value: 'hello',att1:'nihao'}, // label为 下拉列表中展示的，value为选中后输入框显示的  还可自定义其他属性，在select事件中都可以获取到
                {label: '再见', value: 'bye',att1:'zaijian'},
            ];
            response(result);
        }
    })

</script>
</body>

</html>

ajax动态查询版本

<html>
<head>
    <!--bootstrap css-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.11.0/jquery-ui.min.css" crossorigin="anonymous">

    <!--jquery js-->　　
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>
    <!--bootstrap js-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/jqueryui/1.11.1/jquery-ui.min.js" crossorigin="anonymous"></script>

</head>
<body>
<p>
    <input id="name"/>
</p>

<script type="text/javascript">
    $("#name").autocomplete({
        minLength: 3, //输入3个字符后 再开始匹配
        select: function (event, ui) {
            console.log(JSON.stringify(ui));
            console.log($(event.target).val()); //获取输入框对象
        },
        source: function (request, response) {
            $.ajax({
                url: "xxxx",
                data: {"param": request.term},
                type: 'GET',
                success: function (data) {
                    var result = data.rows.map(function (item) {
                        return {label: item.itCode, value: item.itCode, real: item.id}
                    });
                    response(result);
                }
            });
        }
    })

</script>
</body>

</html>

PS：用的时候有需要注意的坑

如果在bootstrap的模态窗体使用autocomplete，则输入框的下拉列表无法展示，被模态窗口给挡住了，解决方案就是将autocomplete的下拉列表z-index样式设置的更大

.ui-autocomplete {
        z-index: 9999;
    }

2.如果页面中使用到bootstrap-datetimepicker，则日期选择框的样式会被打乱，解决方案是将jquery-ui.js中关于datetimepicker相关的操作删除掉。可以点击链接下载去掉后的jquery-ui.js

链接:https://pan.baidu.com/s/1H8f05Ph1onHKUOBcZrzZpg 密码:tyf0

→→→→

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery.UI.autocomplate

自动填充输入框：适用数据源数据大，且需要根据输入查询并选择数据的情景。演示版本<html><head>  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32O
复制链接

扫一扫