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元素，链接到它之前的文本字段，并仅根据所选内容更新文本字段的值。如果您想基于文本字段上的change事件运行代码，则需要先阅读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下拉框

1 个答案: