前言

在网站找了一大圈都是问题没有答案，记录记录谨防踩坑

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值

layui中使用autocomplete.js的更多相关文章

  1. JQuery UI Autocomplete与jquery.autocomplete.js

    程序中要把一个select改成可以下拉搜索的,就想到了使用下autocomplete.js大概是这么个东西. 问了下同学,推荐我使用Jquery Ui autocomplete,下载下来开始调试使用, ...

  2. jquery.autocomplete.js 插件的自定义搜索规则

    这二天开始用jquery.autocomplete这个自动完成插件.功能基本比较强大,但自己在实际需求中发现还是有一处不足!问题是这样:当我定义了一个本地数据JS文件时,格式为JSON式的数组.如下: ...

  3. autocomplete.js的使用（1）：自动输入时，出现下拉选择框

    autocomplete.js可以实现自动输入文本值,并出现下拉框 js引用:所需要的autocomplete文件需要在网站中自行下载. <!--自动输入文本值所需的jquery文件--> ...

  4. FastAdmin 中 的 layer js 使用 r.js 压缩出现的问题

    FastAdmin 中 的 layer js 使用 r.js 压缩出现的问题 https://fly.layui.com/jie/2120/ layer是requirejs压缩文件r.js里面的关键字 ...

  5. layui中的tab切换

    tab切换是常见的效果,为了方便经常使用插架中自带的,下面是layui中自带的tab切换效果, 主要代码如下: <!DOCTYPE html> <html lang="en ...

  6. django对layui中csrf_token处理方式及其它一些处理

    第一:由于layui官方是没有csrf_token处理机制,所以,在使用layui中post请求,请不要按layui官方提供的两种方法进行设置 官方设置如下: table.render({ elem: ...

  7. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  8. CentOS 6 中安装Node.js 4.0 版本或以上

    如果想在CentOS 6 中安装Node.js >4.0,如果通过以往的方式安装: wget http://nodejs.org/dist/v4.0.0/node-v4.0.0.tar.gz t ...

  9. win7,vs2010,asp.net项目中修改外部js文件，在调试时加载的还是旧文件

    win7,vs2010,asp.net项目中修改外部js文件,在调试时加载的还是旧文件 我杀过 w3wp.exe和asp.net_state的进程,重启 iis admin的服务,都还是不行. 只是把 ...

随机推荐

  1. vmware和centOS的安装

    如果勾上了,会立即在本机开辟20g的空间,需要很长时间 选择电脑中ISO镜像的位置,之后点击开启虚拟机! 这个密码是root用户的密码!管理员密码! 可以选择我们的Minimal没有界面的!

  2. php 二级级联菜单

    找了很多个级联的菜单,都不好用,自己弄个简单点的,共享下,希望有朋友用得着 <?php //建立表country,有三个字段Id,parentId,area. $pro = $_POST['pr ...

  3. javaSE_08Java中static、继承、重写-思维导图

    思维导图看不清楚时: 1)可以将图片另存为图片,保存在本地来查看 : 2)右击在新标签中打开放大查看 (IE不支持,搜狗,360可以):

  4. maven 创建后报错

    <dependency> <groupId>javax</groupId> <artifactId>javaee-api</artifactId& ...

  5. MQL语句大全

    mysql sql语句大全 1.说明:创建数据库 CREATE DATABASE database-name 2.说明:删除数据库 drop database dbname 3.说明:备份sql se ...

  6. web 直播&即时聊天------阿里云、融云（三）

    经过前面的知识,基本已经把聊天室的功能搞定了,剩下的就是直播的问题了... 一如既往,阿里云的web demo也是少的可怜,只有一个web播放器(Prismplayer),所以这里主要就此播放器踩的坑 ...

  7. gradle 使用总结

    什么是gradle 书面化解释: Gradle可以自动化地进行软件构建.测试.发布.部署.软件打包,同时也可以完成项目相关功能如:生成静态网站.生成文档等. Gradle是一种依赖管理工具. 它和ma ...

  8. JavaScript练习笔记整理·3 - 6.25

    欢迎和大家一起来讨论~   基础练习(1):   我的解答为: function array_diff(a, b) { if (b == "") return a; return ...

  9. oracle表空间增长异常或表空间占用过高问题分析

    本人对oracle调优还处在不断学习状态,这个问题是之前处理的项目上遇到过的,顺利解决了,分享下此类问题的处理思路,不足之处,还请指正. 项目上反馈说业务表空间增长越来越快,上次新增的30G数据文件, ...

  10. JavaScript 创建一个 form 表单并提交

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...