layui实现输入后搜索下拉选择列表

在使用Layui框架时，可以通过layui-autocomplete插件来实现输入框的实时搜索下拉选择列表。下面是一个简单的实现示例：

1. 引入必要的Layui和jQuery库

确保项目中已经引入了Layui和jQuery库。

2. HTML结构

首先创建一个输入框，用于搜索并显示下拉选项。

<div class="layui-form">
    <input type="text" id="searchInput" placeholder="请输入关键词" class="layui-input">
</div>

3. JavaScript实现

接下来，在JavaScript中设置Layui的自动完成功能。通过监听输入框的内容变化，根据用户输入动态生成搜索结果，并显示在下拉框中。

layui.use(['autocomplete', 'jquery'], function() {
    var autocomplete = layui.autocomplete;
    var $ = layui.jquery;

    // 初始化autocomplete
    autocomplete.render({
        elem: '#searchInput',      // 绑定的输入框ID
        cache: false,              // 禁用缓存
        url: '/api/search',        // 数据接口URL
        method: 'GET',             // 请求方法
        where: {},                 // 请求参数（可以根据需要添加）
        template_val: '{{d.name}}', // 显示的字段
        template_txt: '<div>{{d.name}} - {{d.info}}</div>', // 显示的格式
        onselect: function(data) { // 选择后的回调
            console.log("选中内容: ", data);
            // 这里可以设置选中后所需的业务逻辑
        }
    });
});

4. 服务器端接口

假设在后端设置了一个API /api/search，用于根据关键字返回搜索结果。API应该返回一个JSON格式的数据，如下：

[
    {"name": "选项1", "info": "附加信息1"},
    {"name": "选项2", "info": "附加信息2"},
    {"name": "选项3", "info": "附加信息3"}
]

解释代码

• elem：绑定的输入框的选择器。

• url：搜索数据的API接口地址。

• template_val：定义选择后输入框中显示的字段。

• template_txt：定义搜索结果下拉列表中每一项的显示格式。

• onselect：定义用户选择某个选项后的回调函数。

注意事项

• 若API接口不在同源环境下，确保后端配置了跨域。

• 可以在where中设置参数，动态根据输入内容改变参数，实现不同条件的搜索。

这样就能通过Layui实现一个简洁的搜索下拉选择功能。

最后

以上就是名字长了才好记为你收集整理的layui实现输入后搜索下拉选择列表的全部内容，希望文章能够帮你解决layui实现输入后搜索下拉选择列表所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。