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

Question

В форме ввода у меня есть datalist, который я загружаю с помощью 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); 

    }); 
}); 

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

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

Там нет SelectedIndex для DataList, потому что его скрытый от браузера. Если вы хотите получить значение текстового поля, то вы можете использовать это:

$(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. Это даст вам возможность запускать, когда пользователь выбирает какое-то значение из datalist.

$('#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 
 
    ); 
 

 
});