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

【问题标题】：HTML Dropdown Box with Search and Input带有搜索和输入的 HTML 下拉框
【发布时间】：2020-11-26 22:50:05
【问题描述】：

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

使用 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。
如果没有找到，是否可以使用用户输入作为结果？谢谢

【问题讨论】：

您可以使用标准的datalist 元素：developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
哇，就这么简单！！谢谢！更新，所以@RoryMcCrossan，你会用显示最终选择/输入结果的js脚本回答吗？
然后我搜索发现stackoverflow.com/questions/43173544，但它只能做选择，不能输入。
你能指定预期的结果吗？
我没有指责你任何事情。我试图帮助你。此外，我并非随时都可以回答您的问题。我碰巧通过了这个，并假设您自己会设法弄清楚如何使用基本控件。显然不是。

标签： javascript html jquery dropdownbox

【解决方案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">

【讨论】：