从动态数据列表中选择文本和值

Question

我正在尝试使用数据列表创建一个自动完成框。这是我所做的和想要的：

1. 将数据列表与来自服务器的响应（键，值）绑定

2. 当我绑定我的数据列表时，我会看到键和值，但我只想看到值。问题：如何只显示datalist中的值？

3. 每当我从这个动态数据列表中选择一个值时，我都想显示所选值及其文本。问题：如何在datalist中显示选中的值及其对应的key？

我的代码：

<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');

    }

Answer 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>