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 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

Webix JavaScript UI 库可以帮你构建跨平台的HTML5 和 CSS3 程序

XB 软件公司最近发布了JavaScript UI 库Webix ,其中包含的组件超过45个,用这些组件可以构建跟HTML5 和 CSS3 兼容的程序,这些程序...

21660
来自专栏大内老A

如何解决jQuery Validation针对动态添加的表单无法工作的问题?

为了充分利用ASP.NET MVC在服务端呈现HTML的能力,在《利用动态注入HTML的方式来设计复杂页面》一文中介绍了,通过Ajax调用获取HTML来呈现复杂...

20590
来自专栏c#开发者

Convert string to DateTime

如何使用 Visual C# .NET 对 DataGrid Windows 控件执行分页 察看本文应用于的产品 文章编号 : 307710 最后修改...

38290
来自专栏落影的专栏

iOS开发笔记(二)

前言 开发做笔记是好习惯,总结分享是巩固记忆。 遇到问题,思考其背后的原因、原理。 AFNetworking 1、progress回调block,不在主线程;...

35070
来自专栏小樱的经验随笔

浅谈Notepad++选中行操作+快捷键+使用技巧【超详解】

Notepad++选中行操作 快捷键 使用技巧 用Notepad++写代码,要是有一些重复的代码想copy一下,还真不容易,又得动用鼠标,巨烦人。。。。 有木...

1.3K40
来自专栏Python、Flask、Django

Go语言学习之 - 简单的并发程序

10810
来自专栏IMWeb前端团队

vue相关学习站点

本文作者:IMWeb jacksun 原文出处:IMWeb社区 未经同意,禁止转载 https://segmentfault.com/q/101000...

22170
来自专栏Youngxj

[软件]图片中隐藏你想藏的文件

19020
来自专栏更流畅、简洁的软件开发方式

【自然框架】表单控件 之 一个表单修改多个表里的记录

      FormView 确实挺方便的,不过他也有几个小问题,只把FormView拖到页面里是不行的,还得再拽几个文本框、下拉列表框这一类的控件,还得布局。...

23260
来自专栏不止是前端

React下ECharts的数据驱动探索

使用过Vue React框架我们就知道,我们不再更改某个DOM的innertext和innerhtml属性就能完成视图的改变,两者都是通过对状态的改变,唤起 v...

20740

扫码关注云+社区

领取腾讯云代金券