layui中使用autocomplete.js
2024-10-15 08:29:04
前言
在网站找了一大圈都是问题没有答案,记录记录谨防踩坑
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值
最新文章
- Sharepoint学习笔记—ECM系列—文档列表的Metedata Navigation与Key Filter功能的实现
- python logging usage
- SAP 采购订单收货时报错:对于采购订单xxxx无收货可能
- 一款好用且免费的语句分析工具Plan Explorer
- python subprocess.Popen 非阻塞
- localStorage和sessionStorage的区别
- THD 变量存入threads中
- Spark Mllib逻辑回归算法分析
- 内核源码分析之进程调度机制(基于3.16-rc4)
- DOS - COPY
- JQuery中的省市联动
- mysql5 乱码问题解决方案
- 得到一个div下 特定ID的所有标签
- UVA11983 - Weird Advertisement(扫描线)
- 用PHPExcel类读取excel文件的内容
- mysql死锁+解决
- Adapterview和adapter的联系
- css预处理器--sass学习($变量名)
- R基本图形示例及代码(持续收集)
- CVE-2017-12615漏洞利用