单击时自动完成更新第二个输入框上的相同值

Question

请有人帮我解决这个问题，因为大多数事情看起来都不错，比如从数据库中获取匹配结果，但是当我在两个输入框中单击值时，会添加相同的自动完成值。有人可以帮我解决这个问题吗？这是我的 html：<div class="col-sm-12">    <label class="form-label-outside">From</label>        <div class="form-wrap form-wrap-inline">        <input id="from-input" class="form-input" name="from" type="text">        <div id="from-show-list" class="list-group"></div>    </div></div><div class="col-sm-12">    <label class="form-label-outside">To</label>    <div class="form-wrap form-wrap-inline">        <input id="to-input" class="form-input"  name="to" type="text">        <div id="to-show-list" class="list-group"></div>    </div></div>我的 js<script src="js/jquery.min.js"></script><script>    $(document).ready(function() {        $("#from-input").keyup(function() {            let searchText = $(this).val();            if (searchText != "") {                $.ajax({                    url: "airports.php",                    method: "post",                    data: {                        query: searchText,                    },                    success: function(response) {                        $("#from-show-list").html(response);                    },                });            } else {                $("#from-show-list").html("");            }        });        // Set searched text in input field on click of search button        $(document).on("click", "a", function() {            $("#from-input").val($(this).text());            $("#from-show-list").html("");        });    });

Answer 1

问题出现是由于链接上的点击功能。通过指定包含这些链接的 div 的 ID 来定义两个单独的链接组。

    // Set searched text in input field on click of search button

    $(document).on("click", "#from-show-list a", function() {

        $("#from-input").val($(this).text());

        $("#from-show-list").html("");

    });

    // Set searched text in input field on click of search button

    $(document).on("click", "#to-show-list a", function() {

        $("#to-input").val($(this).text());

        $("#to-show-list").html("");

    });

像这样使用 css 将最大高度应用于结果 div。

<div id="from-show-list" class="list-group" style="max-height: 100px;  overflow: auto;"></div>

<div id="to-show-list" class="list-group" style="max-height: 100px;  overflow: auto;"></div>