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

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 来定义两个单独的链接组。&nbsp; &nbsp; // Set searched text in input field on click of search button&nbsp; &nbsp; $(document).on("click", "#from-show-list a", function() {&nbsp; &nbsp; &nbsp; &nbsp; $("#from-input").val($(this).text());&nbsp; &nbsp; &nbsp; &nbsp; $("#from-show-list").html("");&nbsp; &nbsp; });&nbsp; &nbsp; // Set searched text in input field on click of search button&nbsp; &nbsp; $(document).on("click", "#to-show-list a", function() {&nbsp; &nbsp; &nbsp; &nbsp; $("#to-input").val($(this).text());&nbsp; &nbsp; &nbsp; &nbsp; $("#to-show-list").html("");&nbsp; &nbsp; });像这样使用 css 将最大高度应用于结果 div。<div id="from-show-list" class="list-group" style="max-height: 100px;&nbsp; overflow: auto;"></div><div id="to-show-list" class="list-group" style="max-height: 100px;&nbsp; overflow: auto;"></div>