datalist: display matched choice from query in input text box - html

Question

I have a form for editing existing data. The user chooses a record and then the form is pre-populated by a database query. Some of the form fields are presented as datalists (allowing pre-populated choices, but users can enter their own).
What I would like to do is to have these datalist elements appear with the current value for that key (from the db) showing in the text box atop the datalist - i.e., in the same manner that an <option> value can be matched to options in a <select> input and show that option in the <select> box when it is rendered.
I've added selected to the options list like this:
<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>
...but that doesn't seem to do the trick. The datalist input box always displays ~ Status ~ (the placeholder). If I remove the placeholder, it's just blank.
Does datalist support this kind of functionality? How do I make this happen?

Answer 1

datalist.js doesnt update with the selected value, you have to add this after the datalist initialization
//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: And added support for multiple lists as requested, and fixed error with the datalist.js fallback solution to avoid overwriting the placeholder if nothing selected.