datalist: отображение совпадающего выбора из запроса во входном текстовом поле

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 не делает обновление с выбранным значением, вы должны добавить это после инициализации 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()); 
    } 
}); 

updated jsfiddle

Edit: И добавлена ​​поддержка нескольких списков в соответствии с просьбой, и исправлена ​​ошибка с решение резервного копирования datalist.js, чтобы избежать перезаписи заполнителя, если ничего не выбрано.