I've been trying to incorporate inputs into a datalist in two different ways. However, I've encountered an issue with the first method not working properly.
--> Check it out on bootlply
var dataList = document.getElementById('json-datalist');
var jsonOptions = [{
"product": "11111",
"description": "description 1"
}, {
"product": "22222",
"description": "description 2"
}, {
"product": "33333",
"description": "description 3"
}, {
"product": "44444",
"description": "description 4"
}, {
"product": "55555",
"description": "description 5"
}];
jsonOptions.forEach(function(item) {
var option = document.createElement('option');
option.value = item.description;
option.text = item.product;
option.setAttribute('data-product', item.product);
dataList.appendChild(option);
});
Then, include the following:
<div class="container">
<div class="form-group">
<div class="col-xs-4">
<input class="form-control" name="description" type="text" id="ajax" list="json-datalist">
<datalist id="json-datalist"></datalist>
</div>
<div class="col-xs-2">
<datalist id="material">
<option value="1">
</option><option value="2">
</option><option value="3">
</option></datalist>
<input type="text" list="material" class="form-control" name="material-0" placeholder="material">
</div>
</div>
</div>