在输入更改时选择 datalist 值并使用 jQuery javascript 填充表单答案

【问题标题】：Select datalist value on input change and populate the form using jQuery javascript在输入更改时选择 datalist 值并使用 jQuery javascript 填充表单
【发布时间】：2021-03-22 22:39:08
【问题描述】：

我正在尝试进行自动完成，当输入发生更改并从数据列表中选择了一个选项时，我希望使用数据列表中的选定值/文本填充表单和文本字段。我在 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>

【问题讨论】：

console.log($(this).val()); ?
@The_Death_Raw 修改了这个问题。它抓住了城市名称。但不会分配给str，也不会填充到p 或div。

标签： javascript html jquery autocomplete

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

【讨论】：