前言

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

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. Vulkan Tutorial 08 交换链

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 在这一章节,我们了解一下将渲染图像提交到屏幕的基本机制.这种机制成为交换链,并且需要 ...

  2. 一键帮你复制多个文件到多个机器——PowerShell小脚本（内附PS远程执行命令问题解析）

    作为一个后台程序猿,经常需要把一堆程序集(DLL)或者应用程序(EXE)复制到多个服务器上,实现程序的代码逻辑更新,用以测试新的功能或改动逻辑.这里给大家介绍一个自己实现的PowerShell脚本,方 ...

  3. Centos 执行shell命令返回127错误

    shell脚本功能:连接mysql,自动创建数据库,脚本如下 mysql -h$MYSQL_IP -u$MYSQL_USER -p$MYSQL_PASSWORD --default-character ...

  4. JavaScript设计模式_02_策略模式

    在程序设计中,我们常常遇到这种情况,要实现某一个功能我们有很多种算法可以实现.这些算法灵活多样,而且可以随意互相替换.这种解决方案就是所谓的策略模式. /* * pre:策略模式 * 示例:公司计算奖 ...

  5. selenium+python元素操作

    1.判断元素的属性if i.get_attribute('type') == 'checkbox' 2.获取当前窗口的坐标 driver.get_window_position 获取当前窗口的长宽 d ...

  6. 基于docker的 Hyperledger Fabric 多机环境搭建（上）

    环境:ubuntu 16.04 Docker  17.04.0-ce go 1.7.4 consoul v0.8.0.4 ======================================= ...

  7. AngularJS高级程序设计读书笔记 -- 过滤器篇

    一. 过滤器基础 过滤器用于在视图中格式化展现给用户的数据. 一旦定义过滤器之后, 就可在整个模块中全面应用, 也就意味着可以用来保证跨多个控制器和视图之间的数据展示的一致性. 过滤器将数据在被指令处 ...

  8. 《JavaScript高级程序设计》笔记一

    第一章 JavaScript简介 一.JavaScript的起源 JavaScript诞生于1995年.当时,它的主要作用是处理一些输入验证操作.之前的话,都是把表单数据发送到服务器端,然后再去判断有 ...

  9. textarea禁止拖拽

    <textarea style="resize:none;" ></textarea>'

  10. flask 上传头像

    上传头像,自己感觉了好久,就是上传文件呗其实,存在一个路径,数据库存储这个路径,然后展示给前端,啥都不说,看怎么实现的. 数据库设置如下 user_image=db.Column(db.String( ...