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

  });
});

更新： 使用 datalist。要求：

如果找到，使用找到的值作为结果。
如果没有找到，则使用用户输入作为结果。

可能两者是一样的情况，但我不太懂js怎么说。

     $(document).on('change', '#place', function () {
         $("#fax").val($("#place").val());
      });

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

我自己没有看到一个简单的方法来做到这一点，因为我不太了解 js。
如果没有找到，是否可以使用用户输入作为结果？谢谢

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

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

HTML Dropdown Box with Search and Input

html

javascript

jquery

dropdownbox