fastadmin后台时间类型搜索框自带下拉历史数据问题

问题截图如下:

操作起来非常不方便;

解决办法如下:

table.on('post-body.bs.table', function (e, settings, json, xhr) {
    $('.datetimerange').each(function () {
        $(this).attr('autocomplete', 'off');
    })
});

 .datetimerange为类名,根据自身情况调整即可

FastAdmin 中实现 JavaScript 控制的搜索框动态下拉列表功能,可以结合 `selectpicker` 插件来完成。该插件支持搜索、多选等功能,并且可以通过 JS 动态设置和加载数据。 ### 动态初始化 selectpicker 下拉框 FastAdmin 提供了内置的 `Form.events.selectpicker($("form"))` 方法用于渲染并绑定表单中的 `selectpicker` 组件[^3]。如果需要通过 JavaScript 动态生成 `<select>` 元素,则应在插入 DOM 后手动调用此方法进行初始化。 示例代码如下: ```javascript // 假设这是从服务器获取的下拉数据 let options = [ { id: 1, name: '仓库A' }, { id: 2, name: '仓库B' }, { id: 3, name: '仓库C' } ]; // 创建 select 元素 let $select = $('<select>', { name: 'warehouse_id', class: 'form-control selectpicker', 'data-live-search': true, multiple: true // 如果需要多选 }); // 添加选项 options.forEach(function (option) { $select.append($('<option>', { value: option.id, text: option.name })); }); // 将 select 插入到指定容器中 $('.search-container').append($select); // 初始化 selectpicker 插件 Form.events.selectpicker($select); ``` 这样可以在页面加载后动态创建一个带有搜索功能的下拉列表,并确保其正常工作。 ### 使用 AJAX 加载远程数据并填充到 selectpicker 对于需要从接口获取数据的情况,可以通过 AJAX 请求获取数据并填充到 `<select>` 中,再调用 `selectpicker` 初始化方法。以下是一个完整的例子: ```javascript let $select = $('<select>', { name: 'warehouse_id', class: 'form-control selectpicker', 'data-live-search': true, multiple: true }); $('.search-container').append($select); $.getJSON('/api/warehouses', function (data) { data.forEach(function (item) { $select.append($('<option>', { value: item.id, text: item.name })); }); // 数据加载完成后初始化插件 Form.events.selectpicker($select); }); ``` 此方式适用于需要根据用户输入或其他条件动态加载选项的场景。 ### 自定义字段配置(如隐藏字段、联动等) 在某些情况下,可能希望将某个字段设置为隐藏状态但仍参与搜索逻辑。此时可以在字段配置中使用 `visible: false` 来隐藏字段,并通过其他控件触发值变化。例如: ```javascript { field: 'warehouse_id', title: '仓库', visible: false, align: 'left', addClass: 'selectpicker', operate: 'IN', data: 'multiple', searchList: $.getJSON('base/wGetAllList') // 从接口加载数据 } ``` 这种方式允许开发者灵活控制字段的行为和外观,同时保留其在搜索逻辑中的作用。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

oraclechaozi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值