layui是一款轻量级的前端UI框架，强调原生HTML/CSS/JS的开发体验。本文介绍了如何在layui中设置autocomplete功能，通过springboot项目引入layui，并展示了界面创建和js数据展示的示例。
一、layUI的介绍
layui(谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。
二、环境的建立
官网下载文件地址：https://www.layui.com/
点击【立即下载】按钮进行下载
1、建立springboot项目将layUI进行引入
2、说明layUI加载情况
获得 layui 后，将其完整地部署到你的项目目录(或静态资源服务器)，你只需要引入下述两个文件：./layui/css/layui.css./layui/layui.js //提示：如果是采用非模块化方式(最下面有讲解)，此处可换成：./layui/layui.all.js没错，不用去管其它任何文件。因为他们(比如各模块)都是在最终使用的时候才会自动加载。这是一个基本的入门页面：
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>开始使用layuititle><link rel="stylesheet" href="../layui/css/layui.css">head><body><script src="../layui/layui.js">script><script>//一般直接写在一个js文件中layui.use(['layer', 'form'], function(){
var layer = layui.layer,form = layui.form;layer.msg('Hello World');});script>body>html>如果你想采用非模块化方式(即所有模块一次性加载，尽管我们并不推荐你这么做)，你也可以按照下面的方式使用：
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>非模块化方式使用layuititle><link rel="stylesheet" href="../layui/css/layui.css">head><body><script src="../layui/layui.all.js">script><script>//由于模块都一次性加载，因此不用执行 layui.use() 来加载对应模块，直接使用即可：;!function(){
var layer = layui.layer,form = layui.form;layer.msg('Hello World');}();script>body>html>3、建立一个HTML界面用springboot的方式进入界面
(1)spring-boot 对Thymeleaf很多配置有默认配置，如默认页面映射路径为：classpath:/templates/， 默认的文件为界面后缀为：.html。所以，上面HTML文件中引入的css和js文件路径不要写成如下这种写法：
<link rel="stylesheet" href="../layui/css/layui.css"><script src="../layui/layui.js">script>(2)如果像上面的方式引入在检查资源文件是否加载的时候在浏览器中调试模式下看是否加载成功，如下为加载不成功示例：
如果安如下加载没有起作用可以重启idea试一试<link rel="stylesheet" href="/static/layui/css/layui.css"><script type="text/javascript" src="/static/layui/layui.js">script>或<link rel="stylesheet" href="../static/layui/css/layui.css"><
最低0.47元/天 解锁文章
4911
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
