Select 输入更改时的数据列表值并使用 jQuery javascript 填充表单

Question

我正在尝试进行自动完成，当输入更改并从数据列表中选择一个选项时，我希望表单和文本字段填充数据列表中选定的 value/text。我在 stackexchange 上尝试了类似问题的许多选项，但无法使其工作。

求助！

$(document).ready(function() {
  $('#UserCity').on('input', function() {
    var str = "";
    console.log($(this).val());
    $("#UserCitySelect").on('select', function() {
      str += $(this).text() + " ";
    });
    str = $("#UserCitySelect option:selected").text()
    console.log(str);
    document.getElementById("selected").text = str;
    document.getElementById("selecteddiv").innerHTML = str;
    console.log($(this).val());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="UserCity" id="UserCity" label="User City" max_length="25" list="UserCitySelect" required="">

<p id="selected"><p>
<div id="selecteddiv"><div>

<datalist id="UserCitySelect">
    <option value="Los Angeles">Los Angeles</option>
    <option value="New York">New York</option>
    <option value="Chicago">Chicago</option>
</datalist>

Answer 1

:selected 不适用于 datalist 选项，因为一个数据列表可以为多个输入提供建议。如果两个不同的输入包含列表中的两个不同建议，将选择哪个？

您可以使用输入文本事件检查输入值的变化，并使用 id 分配 div 中的值。

$(document).ready(function() {
  $("input[name='UserCity']").on('input', function(e){
     var selectedVal = $(this).val();
     document.getElementById("selected").innerHTML = selectedVal ;
     document.getElementById("selecteddiv").innerHTML = selectedVal ;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="UserCity" id="UserCity" label="User City" max_length="25" list="UserCitySelect" required="">
<datalist id="UserCitySelect">
    <option value="Los Angeles">Los Angeles</option>
    <option value="New York">New York</option>
    <option value="Chicago">Chicago</option>
</datalist>
<p id="selected"></p>
<div id="selecteddiv"><div>

Select 输入更改时的数据列表值并使用 jQuery javascript 填充表单

Select datalist value on input change and populate the form using jQuery javascript

javascript

html

jquery

autocomplete