layui&jquery-autocomplete组合

发表于 | 更新于 | 分类于

layui与jquery-autocomplete 组合使用中的问题

  • 载入问题

远程载入顺序

1
2
3
4
5
6
7
8
9
10
11
<!-- 先jquery -->
<script type="text/javascript" src="images/jquery.min.js"></script>


<!-- layui -->
<link rel="stylesheet" href="images/layui/css/layui.css">
<script type="text/javascript" src="images/layui/layui.all.js"></script>

<!-- jquery插件 -->
<script type="text/javascript" src="images/autocomplete/jquery.autocomplete.js"></script>
<link href="https://cdn.bootcss.com/jquery-autocomplete/1.0.7/jquery.auto-complete.css" rel="stylesheet">
  • layui-form表单
1
2
3
4
5
<!-- 文本框 -->
<input name="card_sn" type="text" autocomplete="off" class="layui-input" lay-verify="required" placeholder="默认提示"/>

<!-- 蓝色普通按钮 -->
<button class="layui-btn layui-btn-normal" lay-filter="card_gen_form" lay-submit>立即提交</button>
  • layui表单提交-ajax+msgbox提示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

layui.use(['jquery', 'layer','laydate','form'], function(){ 

    //日期选择
    let laydate = layui.laydate;
    laydate.render({
        elem: '#start_date' //指定元素
    });
    laydate.render({
        elem: '#end_date' //指定元素
    });


    // jquery载入
    let $ = layui.$      
    let Url = 'cards.php?rec=gen'
    let form = layui.form;

    // ajax提交，msgbox显示
    form.on('submit(card_gen_form)', function(data){
        // layer.msg(JSON.stringify(data.field));
       loading = layer.load(1, {
                    shade: [0.1, '#fff']
                 });
        let card_gen_config = JSON.stringify(data.field);
        
        $.ajax({
            type:"post",
            url:Url,
            data:card_gen_config,
            dataType:"json",
            success : function(data){
                // console.log(data.message);
                layer.close(loading);
                layer.msg(
                    data.message,{
                        time: 2000   
                    });
                return false;
            },
            error:function(){
            }
        });
        return false;
    });


});
  • jquery-autocomplete需要被layui调用中的修改问题

打开jquery.autocomplete.js，修改其中的22行，将jquery调用改为用layui中的jquery调用方法

upload successful

修改代码如下

1
2
3
layui.use(['jquery'], function () {
    factory(layui.jquery);
});

autocomplete插件与layui弹层问题冲突

1
2
3
4
/*设定z-index置顶*/
.ui-front {
    z-index: 110000003;
}
  • layui&jquery-autocomplete组合调用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

layui.use(['jquery','layer','form'], function(){

  // 载入jquery

  let $=layui.jquery;
  $("[id='card_edit']").on("click",function(){
    $('#user_info').val('');

    // 弹框
    let user_sel = layer.open({
                      type: 1,
                      title: '手机号&姓名&昵称',
                      content: $('#user_sel')
                    });

    // 设定高宽
    layer.style(user_sel, {
      width: '400px',
      height: '200px'
    });

  });

 
 // 文本框输入内容自动检索，每次检索都调用接口
 $("#user_info").autocomplete({

    source: function( request, response ) {
      $.ajax({
        url: "cards.php?rec=search",
        dataType: "json",
        type: "post",
        data:{
            searchUserInfo: $("#user_info").val()
        },
        success:function(data){
          response(data);
        }
      });
    }
 });

});