前言

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

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. C. Friends

    C. Friends 题意 对于任一点,求到此点距离不超过6的节点数. 分析 第一次dfs,形成一个以 1 为根的有向树,设 down[i][j] 为以i为根节点,距离 i 点距离不超过 j 的节点数 ...

  2. 一天搞定CSS： overflow--14

    overflow:针对超出父级的内容如何显示 代码演示 <!DOCTYPE html> <html> <head> <meta charset="U ...

  3. C++抽象编程·运算符重载与友元函数

    运算符重载(Operator overloading) 从我们在几个前篇的类的层次介绍中可以知道,C++可以扩展标准运算符,使其适用于新类型.这种技术称为运算符重载. 例如,字符串类重载+运算符,使其 ...

  4. GPUImage的filter 响应处理链 的理解笔记

    GPUImage的filter的textures处理链式结构 两个最重要的的地方: 最重要的一个类GPUImageOutput(所有的filter的父类,其他也有继承它的,如GPUImageUIEle ...

  5. 打开IIS的快捷键

    [windows键+R]→在运行界面输入“inetmgr”→点击回车键,即可以出现IIS界面

  6. Linux 安装配置 Tomcat

    1.下载 tomcat Linux 版本 oracle 官网下载地址:http://tomcat.apache.org/download-80.cgi 百度云盘链接:http://pan.baidu. ...

  7. Java通过jxl解析Excel文件入库，及日期格式处理方式 （附源代码）

    JAVA可以利用jxl简单快速的读取文件的内容,但是由于版本限制,只能读取97-03  xls格式的Excel. 本文是项目中用到的一个实例,先通过上传xls文件(包含日期),再通过jxl进行读取上传 ...

  8. XML配置文件中写版本号.xsd和不写版本号的区别

    如果写版本号则默认从网上下载并指定最新版本,如果不写版本号则默认从本地下载并使用最新版本.

  9. docker 架构

    看别的地方大致介绍的,粘贴过来 Docker 使用客户端-服务器 (C/S) 架构模式,使用远程API来管理和创建Docker容器. Docker 容器通过 Docker 镜像来创建. 容器与镜像的关 ...

  10. 【JavaScript学习】-事件响应，让网页交互

    什么是事件: JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户单 ...