数据列表：在输入文本框中显示查询中的匹配选择

Question

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

我想要做的是让这些 datalist 元素与该键（来自数据库）的当前值一起显示在 datalist 顶部的文本框中 - 即<option> 值可以与 <select> 输入中的选项匹配并在呈现时在 <select> 框中显示该选项的方式相同。

我已将 selected 添加到选项列表中，如下所示：

<input type="search"
    name="Status"
    placeholder = "~ Status ~"
    id="Status" 
    list="statuslist">

<datalist id="statuslist">
    <select>
      <option value="launched">launched</option>
      <option value="pre-launch" selected>pre-launch</option>
      <option value="no company">no company</option>
    </select>
</datalist>

...但这似乎并不能解决问题。 datalist 输入框始终显示 ~ Status ~（占位符）。如果我删除占位符，它只是空白。

datalist是否支持这种功能？我该如何做到这一点？

Answer 1

datalist.js 不使用所选值更新，您必须在数据列表初始化后添加它

//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());
    }
});

updated jsfiddle

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

数据列表：在输入文本框中显示查询中的匹配选择

datalist: display matched choice from query in input text box

html

html-select

datalist