带有搜索和输入的 HTML 下拉框

Question

我试图搜索我所追求的，这是我能得到的最接近的：使用 jQuery 制作带有搜索框的下拉列表（Yogesh Singh）https://makitweb.com/make-a-dropdown-with-search-box-using-jquery/它可以提供具有搜索功能的 HTML 下拉列表。但是，我希望拥有的是也具有输入能力。即，如果没有找到，则使用用户输入作为结果。我试着看代码，$(document).ready(function(){   // Initialize select2  $("#selUser").select2();  // Read selected option  $('#but_read').click(function(){    var username = $('#selUser option:selected').text();    var userid = $('#selUser').val();    $('#result').html("id : " + userid + ", name : " + username);  });});

Answer 1

<datalist>就像一个单独的select元素并链接到它前面的文本字段，并根据所选内容简单地更新文本字段的值。如果您想根据文本字段上的更改事件运行代码，则需要先阅读datalist，然后从中选择标签。如果没有值，则从文本字段中选择文本。

$(document).ready(function () {

    $(document).on('change', '#place', function () {

        let myString = 

               $(this).next().find("option[value='" + $(this).val() + "']").prop("label");

        myString = myString ? myString : $(this).val();

        $("#fax").val(myString);

        $(this).val(myString); //IF YOU LIKE TO SHOW SAME STRING IN TEXT FIELD TOO

    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <input type="text" id="place" list="places">

    <datalist id="places">

        <option value="WVC" label="503-882-1212"></option>

        <option value="HAM" label="612-883-1414"></option>

        <option value="WON" label="317-445-8585"></option>

    </datalist>

    <br>

    <input type="text" id="fax">