我正在尝试使用数据列表创建自动填充框。这是我想要做的:
将数据列表与服务器的响应(键,值)绑定
当我绑定数据列表时,我同时看到键和值,但是我只想看到值。问题:如何仅在数据列表中显示值?
每当我从此动态数据列表中选择一个值时,我都希望显示选择的值及其文本。问题:如何从数据列表中显示所选值及其对应的键?
我的代码:
<input type="text" id="tex_in" list="dataList" />
<datalist id="dataList" >
</datalist>
if (query.length >= 4)
{
$.ajax({
type: "POST",
url: proxy,
data: JSON.stringify({"table" : table, "query" : query}),
success: function(){},
dataType: "json",
contentType : "application/json",
success: function (response) {
var data_response =
JSON.stringify(response)
var data = JSON.parse(data_response);
data.response.docs.forEach(function (el) {
if (autoCan.length < 10)
autoCan.push([el["key"], el["value"]]);
});
//console.log(autoCan);
if (autoCan.length)
{
autoCan.forEach(function (el) {
$('#dataList').append($("<option></option>").val(el[1]).html(el[0])); //
});
// display selected key and value from this datalist
$("#dataList").click(function (){
console.log($('#dataList option:selected').text());
console.log($('#dataList').attr('value'));
});
}
else {
$('#dataList').modal('hide');
}
},
error: function() {
console.log("error at server");
}
});
}
else
{
$('#dataList').modal('hide');
}
答案 0 :(得分:-1)
starks = [{id: 1, name: 'Bran'}, {id: 2, name: 'Sansa'}, {id: 3, name: 'Arya'}]
starks.forEach(function(stark) {
$('#selection').append('<option data-value="'+ stark.id+'" value="' + stark.name + '">' + stark.name + '</option>')
})
$("#input").on('input', function (){
var selectedValue = $(this).val();
$('#value').text('Value: '+$('#selection [value="' + selectedValue + '"]').data('value'));
$('#browser [value="' + selectedValue + '"]').data('value')
$('#text').text('Text: '+selectedValue)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="input" type="text" list="selection"/>
<datalist id="selection">
</datalist>
<br/><br/>
<span id="value"></span><br/>
<span id="text"></span>