layui input搜索+select动态展示数据

最新推荐文章于 2026-02-18 00:13:25 发布

原创最新推荐文章于 2026-02-18 00:13:25 发布 · 1.3k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

jQuery

当前文章被收录于：

jQuery

4 篇文章 0 人学习

订阅专栏查看详情

layui

当前文章被收录于：

layui

3 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一个使用jQuery和Ajax动态填充HTML下拉列表的示例。当用户在文本框中输入中文字符时，会触发Ajax请求，从服务器获取匹配的数据并显示为下拉选项。该方法适用于实现智能搜索或自动补全功能。

效果：

代码：

<input type="text" name="param" id="param" list="datas" placeholder="请输入查询条件" autocomplete="off" class="layui-input">
<datalist id="datas" style="display: none;width: 50px"></datalist>

input输入：

<script>
    $("#param").on('input', function () {
        var myReg = /^[\u4e00-\u9fa5]+$/;
        if (myReg.test($("#param").val())) {
            var name = $("#param").val();
            $("#datas").children().filter('option').remove();
            $.ajax({
                method: 'get',
                url: '地址'+name,
                success: function (res) {
                    var html = '';
                    if (res.code == 0) {
                        $.each(res.data, function (index, obj) {
                            html += '<option>' + obj.name + '</option>'
                        });
                        $("#datas").append(html);
                    }else{
                        layer.msg(res.msg,{
                            time:500
                        });
                    }
                }
            })
        }
    }).focus(function () {
        $("#datas").children().filter('option').remove();
    });
</script>

标签

#jquery #前端