HTML5 Datalist - 如果只有一个选项可用，如何自动选择

Question

用户输入带有数据列表的输入框，显示一个选项，可以单击选择。如何自动选择该单一选项？

Answer 1

好的，datalist是一个HTML5元素，允许在大多数现代浏览器上使用原生自动完成功能。据说它不提供设置默认或选定选项的功能。此外，它没有events可用，因此您需要使用元素上的标准事件来执行此操作。

示例

＆＃13;

＆＃13;

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

});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

您可能需要将focusin事件修改为更适合您情况的事件，但这应该会让您继续前进。