Layui Autocomplete 是一个基于
layui 框架的自动完成组件，可以实现输入框自动匹配相关数据并展示在下拉框
中，常用于搜索框、标签选择等场景。
以下是
layui autocomplete 的
使用示例：
1. 引入
layui 和
autocomplete 的 CSS 和
JS 文件：
```html
<link rel="stylesheet" href="/
layui/css/
layui.css">
<script src="/
layui/
layui.
js"></script>
<script src="/
layui-
autocomplete/
autocomplete.
js"></script>
<link rel="stylesheet" href="/
layui-
autocomplete/
autocomplete.css">
```
2. 创建一个输入框和一个下拉框：
```html
<div class="
layui-inline">
<input type="text" id="
autocomplete-input" placeholder="请输入搜索内容"
autocomplete="off" class="
layui-input">
</div>
<div class="
layui-inline">
<div id="
autocomplete-list" class="
layui-anim
layui-anim-upbit
layui-
autocomplete"></div>
</div>
```
3. 初始化
autocomplete 组件：
```
javascript
layui.use(['
autocomplete'], function () {
var
autocomplete =
layui.
autocomplete;
// 初始化
autocomplete 组件
autocomplete.render({
elem: '#
autocomplete-input', // 绑定输入框元素
url: '/api/search', // 数据接口 URL
template_val: '{{d.title}}', // 列表项的模板，可以
使用 layui 的模板引擎
onselect: function (resp) { // 选
中列表项后的回调函数
console.log(resp);
}
});
});
```
4. 编写数据接口：
```
javascript
// 数据接口示例（返回一个数组）
app.get('/api/search', function (req, res) {
var keyword = req.query.keyword; // 获取输入框
中的关键词
var data = [
{ title: 'HTML' },
{ title: 'CSS' },
{ title: '
JavaScript' },
{ title: 'Vue.
js' },
{ title: 'React.
js' },
{ title: 'Angular
JS' }
];
var result = [];
// 遍历数组，找出与关键词匹配的项
for (var i = 0; i < data.length; i++) {
var item = data[i];
if (item.title.indexOf(keyword) !== -1) {
result.push(item);
}
}
res.
json(result);
});
```
以上就是
layui autocomplete 的
使用示例，希望对你有所帮助！
本文记录了在layui框架中使用jQuery-Autocomplete插件的过程，包括下载插件、修改源码以适配layui的jQuery、在页面中应用插件的步骤，以及解决在layer弹层中显示时的z-index问题。
最低0.47元/天 解锁文章
扫一扫
4440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
