HTML 5 Datalist - Как автоопределить, доступен ли только один параметр

Question

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

Answer 1

Okay so datalist - элемент HTML5, который позволяет использовать автозаполнение в большинстве современных браузеров. Это говорит о том, что он не дает возможности установить параметр по умолчанию или выбранный. Кроме того, он не имеет events, поэтому вам нужно сделать это, используя стандартные события на ваших элементах.

Пример

$(document).ready(function() { 
 
    var datalist = $('#someCountries'); 
 
    var opts = datalist.find('option'); 
 

 
    console.log(opts.val()); 
 
    console.log(opts.length); 
 

 
    function checkOpts() { 
 
     if (opts.length === 1) { 
 
      $('#country').val(opts.val()); 
 
     } 
 
    } 
 

 
    $('#country').on('focusin', checkOpts); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="country" list="someCountries" /> 
 
<datalist id="someCountries"> 
 
    <option label="United Stated" value="USA"></option> 
 
</datalist>

Вы, возможно, потребуется изменить focusin событие к чему-то более подходящее для вашей ситуации, но это должно получить вас на вашем пути.