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

Question

我试图搜索我所追求的，这是我能得到的最接近的：

使用 jQuery (by 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">