выбор текста и значения из динамического списка данных - PullRequest
Новая
       23

выбор текста и значения из динамического списка данных

0 голосов
/ 19 мая 2019

Я пытаюсь создать окно автозаполнения, используя список данных. Вот что я делаю и хочу:

  1. связать список данных с ответом (ключ, значение) с сервера

  2. Когда я связываю свой список данных, я вижу и ключ и значение, но я хочу видеть только значение. Вопрос: Как отобразить только значение в списке данных?

  3. Всякий раз, когда я выбираю значение из этого динамического списка данных, я хочу показать выбранное значение и его текст. Вопрос: Как отобразить выбранное значение и соответствующий ему ключ из списка данных?

Мой код: 

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

    }

1 Ответ

0 голосов
/ 19 мая 2019 

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