专栏首页一个爱瞎折腾的程序猿layui中使用autocomplete.js

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值

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 看了180分钟的视频,写了半天的代码

    清晨,日常打开B站,被首页此视频的标题所吸引,虽一看就是标题党,但还是没能抑制住好奇心。 视频共计60*3分钟,学习到了很多东西。其中后半部分有许多正三观的见...

    易墨
  • 使用 docker-compose 快速安装Jenkins

    当前 docker 版本:Docker version 18.09.0 当前 docker-compose 版本:docker-compose version...

    易墨
  • Jenkins在shell脚本运行docker权限报错解决

    能够在shell中使用docker version打印版本号,但是无法执行docker,报错信息如下

    易墨
  • 博客园自定义皮肤扁平化设计

    博客园自定义皮肤设计 效果抢先看 ? 眼见为实!!!戳戳戳》》》marsggbo的博客园 1. 博客皮肤 首先将博客皮肤选为BlackLowKey 2. ...

    marsggbo
  • 工厂的未来:人工智能,区块链,增强现实等技术如何颠覆传统制造业

    本文译者: 刘斌 浦东改革与发展研究院金融研究室主任 微信ddkjzx1 从研发实验室的先进机器人到仓库的计算机视觉,人工智能,区块链,增强现实和3D打印以...

    点滴科技资讯
  • VUE---爬虫播放器(三)---页面布局--vue3

    使用了vant3的tabs标签页 vant3 tabs 文档入口 使用在单歌和喜欢这里

    代码哈士奇
  • Docker命令行入门大全:这18条,你不得不知

    Docker有成千上百万的命令行。因此Docker文档内容十分丰富,同时又让刚入门的新手感到不知所措。在本文中,我将重点介绍运行Docker的关键命令。

    CNCF
  • 再谈文件读写:判断文件的几种方法及其优劣对比

    上周,猫猫写了一篇给Python学习者的文件读写指南,跟大家一起详尽地学习了文件读写的基础内容,以及with语句与上下文管理器的进阶知识。

    Python猫
  • 学大数据哪家强?2018全国高职院校“大数据技术与应用” 专业排行榜

    导读:在高职院校开设大数据技术与应用专业,符合当今社会经济发展对专业技能型人才的需要。

    华章科技
  • translateZ()——动画示例

    Html5知典

扫码关注云+社区

领取腾讯云代金券