使用Bootstrap的datalist实现动态自动补全下拉框无建议项如何解决？

问题原因&修复方案 #

• 核心问题有两个：一是你创建的option标签仅设置了value属性，未填充显示文本，部分浏览器不会识别无内容的option作为下拉候选项；二是部分浏览器会缓存datalist的初始状态，动态新增的option不会自动触发下拉列表刷新。

修正后的JS代码

const select = document.getElementById("datalistOptions");
const searchInput = document.getElementById("exampleDataList");
select.innerHTML = "";

for (const key in data['result']) {
    if (data['result'].hasOwnProperty(key) && key !== "error") {
        const val = data['result'][key];
        if (val?.id) { // 先判断id存在再创建节点
            const option = document.createElement("option");              
            option.value = val.id;
            // 新增：给option设置显示文本，可根据实际需求替换为你要展示的字段，比如val.name
            option.textContent = val.id;
            select.appendChild(option);
        }
    }
}

// 新增：强制刷新input绑定的datalist，解决浏览器缓存导致新增选项不显示的问题
const listId = searchInput.getAttribute('list');
searchInput.removeAttribute('list');
setTimeout(() => {
    searchInput.setAttribute('list', listId);
}, 0);

额外排查点

1. 确认input标签的list属性值和datalist的id完全一致，注意属性值大小写敏感
2. 确认fetch回调拿到的data.result结构正确，val.id不为空值
3. 排查是否有自定义CSS规则隐藏了datalist的下拉选项

内容的提问来源于stack exchange，提问作者showtime