前言

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

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. 阿里云 Centos7.3安装mysql5.7.18 rpm安装

    卸载MariaDB CentOS7默认安装MariaDB而不是MySQL,而且yum服务器上也移除了MySQL相关的软件包.因为MariaDB和MySQL可能会冲突,故先卸载MariaDB. 1.安装 ...

  2. 隐马尔科夫模型HMM（二）前向后向算法评估观察序列概率

    隐马尔科夫模型HMM(一)HMM模型 隐马尔科夫模型HMM(二)前向后向算法评估观察序列概率 隐马尔科夫模型HMM(三)鲍姆-韦尔奇算法求解HMM参数(TODO) 隐马尔科夫模型HMM(四)维特比算法 ...

  3. nodeJS之流stream

    前面的话 当内存中无法一次装下需要处理的数据时,或者一边读取一边处理更加高效时,我们就需要用到数据流.NodeJS中通过各种Stream来提供对数据流的操作.本文将详细说明NodeJS中的流strea ...

  4. 记一次调试串口设备Bug的经历

    最近花了差不多1天的时间在折腾一个Bug,该Bug的表象如下: 这个Bug还特别独特,在开发电脑中无提示,在终端用户那里每次使用软件的时候都报这个.仔细思考了一下最近在源码中新添加的功能,没发现有啥特 ...

  5. Hibernate入门（四）

    一 Hibernate缓存 缓存是介于应用程序和数据库之间,对数据库中的数据复制一份到缓存中,其作用就是为了减少应用程序对数据库的访问,访问数据库时先从缓存中取,提高了程序的性能.Hibernate缓 ...

  6. [0] C#软件项目版本号的命名规则及格式介绍

    版本控制比较普遍的 3 种命名格式 : 一.GNU 风格的版本号命名格式 : 主版本号 . 子版本号 [. 修正版本号 [. 编译版本号 ]] 英文对照 : Major_Version_Number. ...

  7. 轻松Angularjs实现表格按指定列排序

    angular表格点击序号进行升序,再次点击进行降序排序,在输入框输入信息,出现相对应数据的那一行. html: <input type="text" ng-model=&q ...

  8. Python读取和处理文件后缀为".sqlite"的数据文件

    最近在弄一个项目分析的时候,看到有一个后缀为”.sqlite”的数据文件,由于以前没怎么接触过,就想着怎么用python来打开并进行数据分析与处理,于是稍微研究了一下. SQLite是一款非常流行的关 ...

  9. MySQL left join操作中 on与where放置条件的区别

    优先级 两者放置相同条件,之所以可能会导致结果集不同,就是因为优先级.on的优先级是高于where的. 1 1 首先明确两个概念: LEFT JOIN 关键字会从左表 (table_name1) 那里 ...

  10. yii 输出当前的sql语句

    <?php namespace app\controllers; use yii\web\Controller; use yii\data\Pagination; use app\models\ ...