zoukankan      html  css  js  c++  java
  • layui中使用autocomplete.js

    前言

    在网站找了一大圈都是问题没有答案,记录记录谨防踩坑
    layui版本:layui-v1.0.9_rls
    jQuery-Autocomplete版本: 1.4.1

    示例

    demo地址:http://runjs.cn/detail/jzararyv

    Autocomplete插件官方示例:http://devbridge.github.io/jQuery-Autocomplete/

    整合步骤

    1. 下载jQuery-Autocomplete.js到本地,传送门

    2. 修改下载的jquery.autocomplete.js的第22行代码,替换jquery为layui中的jquery

    我试图在layui.j后直接对window.jQuery复制,但是好像并没有什么卵用

    // Browser globals
    factory(jQquery);
    
    //↓
    
    // Browser globals 使用layui中的jquery
    layui.use(['jquery'], function () {
          factory(layui.jquery);
    });
    
    

    3. 在页面中使用

    完整代码见:http://runjs.cn/detail/jzararyv

    <html>
    <head>
    <style>
    <!--官网选项列表的样式-->
           .autocomplete-suggestions { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #999; background: #FFF; cursor: default; overflow: auto; -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); z-index: 29891015 !important;}
            .autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
            .autocomplete-no-suggestion { padding: 2px 5px;}
            .autocomplete-selected { background: #F0F0F0; }
            .autocomplete-suggestions strong { font-weight: bold; color: #000; }
            .autocomplete-group { padding: 2px 5px; font-weight: bold; font-size: 16px; color: #000; display: block; border-bottom: 1px solid #000; }
    </style>
    </head>
    <body>
    <input id="qaTags" class="ym-qatitle " placeholder="问题标签,多个以,分隔" autocomplete="off" />
    <!--layui.js,autocompelete.js引用-->
    <script>
    var $=layui.jquery;
    $(function(){
        $('#qaTags').autocomplete({
           lookup: [{data:"data",value"value"}]
        });
    });
    </script>
    </body>
    </html>
    

    4. 若要在layer弹层中显示,autocomplete.js的z-index值就略微有点小了,故需要设置显示块的层级

    .autocomplete-suggestions {z-index: 29891015 !important;}
    
    

    或者修改autocomplete.js中的默认zIndex值

  • 相关阅读:
    CCF CSP 题解
    CCF CSP 2019032 二十四点
    CCF CSP 2018121 小明上学
    CCF CSP 2019092 小明种苹果(续)
    CCF CSP 2019091 小明种苹果
    CCF CSP 2019121 报数
    CCF CSP 2019031 小中大
    CCF CSP 2020061 线性分类器
    CCF CSP 2020062 稀疏向量
    利用国家气象局的webservice查询天气预报(转载)
  • 原文地址:https://www.cnblogs.com/morang/p/7212603.html
Copyright © 2011-2022 走看看