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











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

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

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