Прочитайте значение из datalist в Javascript

Question

В форме ввода у меня есть список данных, который я загружаю его с JSON.

<div class="form-group">
  <div class="col-md-5">
       <input type="text" id="product" list="products" class="form-control" name="product" />
       <datalist id="products"></datalist>
    </div>                      
</div>

JS для Datalist это:

var dataList = document.getElementById('products');
var input = document.getElementById('product');
var request = new XMLHttpRequest();

request.onreadystatechange = function(response) {
  if (request.readyState === 4) {
    if (request.status === 200) {
      // Parse the JSON
      var jsonOptions = JSON.parse(request.responseText);

      // Loop over the JSON array.
      jsonOptions.forEach(function(item) {
        var option = document.createElement('option');

        option.value =item.product;
        option.text = item.description;
        dataList.appendChild(option);
      });

      // Update the placeholder text.
      input.placeholder = "product";
    } else {
      // An error occured :(
      input.placeholder = "errorr :(";
    }
  }
}; 

// Update the placeholder text.
input.placeholder = "Loading options...";

// Set up and make the request.
request.open('GET', 'products.json', true);
request.send();

Сейчас я пытаюсь сделать следующее. Когда пользователь выбирает sth из списка, я хочу получить значение. Я попробовал 2 способа получить значение без успеха.. (Я вставил следующее после кода выше):

$(function() {
    $('#product').on('change keyup', function() {

        var i = this.selectedIndex;
        var opt = $('option[value="'+$(this).val()+'"]');
        console.log("1 --> " + opt + " 2 -->" + i);

    });
});

Что я получаю, когда пытаюсь выбрать что-то из списка данных:

1 --> [object Object] 2 -->undefined

$(function() {
  $('#product').on('change keyup', function() {
console.log($(this));
    var i = $(this).selectedIndex;
    var opt = $('option[value="' + $(this).val() + '"]');
    console.log("1 --> " + opt + " 2 -->" + i);
   

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <div class="col-md-5">
    <input type="text" id="product" list="products" class="form-control" name="product" />
    <datalist id="products">
      <option value="Internet Explorer">1</option>
      <option value="Firefox">2</option>
    </datalist>
  </div>
</div>

Answer 1

Для datalist не существует selectedIndex, потому что он скрыт от браузера. Если вы хотите получить значение текстового поля, вы можете использовать это:

   $(function() {
     $('#product').on('blur', function() {
       var i = this.value;
       var opt = $('option[value="' + $(this).val() + '"]');
       console.log("1 --> " + opt + " 2 -->" + i);

     });
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <div class="col-md-5">
    <input type="text" id="product" list="products" class="form-control" name="product" />
    <datalist id="products">
      <option value="Product1">
        <option value="Product2">
          <option value="Product3">
            <option value="Product4">
              <option value="Product5">
    </datalist>
  </div>
</div>

Answer 2

Попробуй это

$("#products option[value='"+$("#product").val()+"']").text()

Answer 3

Вы должны использовать input событие вместо change, Это даст вам возможность срабатывать, когда пользователь выбирает какое-либо значение из списка данных.

$('#product').on('input keyup', function() {
  var options = $('#products option');
  var inputValue = $('#product')[0].value;

  for (var i = 0; i < options.length; ++i)
    if (options[i].value === inputValue)
      console.log(
          'Selected value from option is ==>',
          options[i].value
      );

});