带有搜索和输入的 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 () {&nbsp; &nbsp; $(document).on('change', '#place', function () {&nbsp; &nbsp; &nbsp; &nbsp; let myString =&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$(this).next().find("option[value='" + $(this).val() + "']").prop("label");&nbsp; &nbsp; &nbsp; &nbsp; myString = myString ? myString : $(this).val();&nbsp; &nbsp; &nbsp; &nbsp; $("#fax").val(myString);&nbsp; &nbsp; &nbsp; &nbsp; $(this).val(myString); //IF YOU LIKE TO SHOW SAME STRING IN TEXT FIELD TOO&nbsp; &nbsp; });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>&nbsp; &nbsp; <input type="text" id="place" list="places">&nbsp; &nbsp; <datalist id="places">&nbsp; &nbsp; &nbsp; &nbsp; <option value="WVC" label="503-882-1212"></option>&nbsp; &nbsp; &nbsp; &nbsp; <option value="HAM" label="612-883-1414"></option>&nbsp; &nbsp; &nbsp; &nbsp; <option value="WON" label="317-445-8585"></option>&nbsp; &nbsp; </datalist>&nbsp; &nbsp; <br>&nbsp; &nbsp; <input type="text" id="fax">