Html datalist：在输入文本框中显示查询中匹配的选项

我有一个用于编辑现有数据的表单。用户选择一条记录，然后通过数据库查询预先填充表单。一些表单字段显示为数据列表（允许预先填充的选项，但用户可以输入自己的选项）

我想做的是让这些

数据列表

元素显示在

数据列表

顶部的文本框中，该键的当前值（来自数据库），即。，以同样的方式，

值可以与

输入中的选项匹配，并在渲染时在

框中显示该选项

我在选项列表中添加了

selected

，如下所示：

推出
发射前
没有同伴

…但这似乎不管用。

datalist

输入框始终显示

~状态

（占位符）。如果我删除占位符，它就是空的

---

datalist

是否支持这种功能？如何实现这一点？

datalist.js不会使用所选值进行更新，您必须在datalist初始化后添加此值

//traverse each list
$('input[list]').each(function(){
    // variable for the jquery object of the selected option
    var datalist = $('#' + $(this).attr('list') + ' option:selected');
    // check if value, but also check if option has the attribute "selected"
    if(datalist.val() != 'undefined' && datalist.attr('selected')){
        // update selected to the pre-selected
        $(this).attr('value',datalist.text());
    }
});

---

编辑：并根据请求添加了对多个列表的支持，修复了datalist.js回退解决方案的错误，以避免在未选择任何内容时覆盖占位符。

请向我们显示相关的javascript/jquery代码，好吗？我正在使用datalist.js插件。因此，唯一的jquery是在中加载datalist.js，然后声明

$（'input[list]'）.datalist（）

在endEdit nevermind我的选择器注释中，我看到现在目标列表是正确的。解决方案没有成功-仍然获得占位符。datalist.js只是提供了一个跨浏览器的解决方案——如果datalist不受支持，它将返回到。请参阅下面我更新的响应。我想这就是你想要的。这很有效！现在只需要将其泛化，使其成为所有数据列表输入的默认行为。有什么想法吗？是的，

。each（）

很好，更新了我的答案。（编辑：顺便说一句，

focus（）

不是必需的，当有多个列表时，datalist.js似乎会在blur/focus上重新填充该列表）Brilliant。只有一个小怪癖…当特定的数据列表没有从db返回的值时，没有“selected”选项，但这段代码现在显示数据列表中的第一个选项，而不是占位符。这一怪癖似乎不会发生在3个框中。你能重现小提琴上的错误，更新它，并将它链接到我吗？我很高兴我帮了你，如果你觉得我解决了你原来的问题，请记得在你能回答的时候尽快标记答案。