时间戳

首页 > 解决方案 > 单击时自动完成更新第二个输入框上的相同值

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

问题描述

有人可以在这里帮助我吗，因为大多数事情看起来都不错，比如从数据库中获取匹配的结果，但是当我点击两个输入框上的值时，会添加相同的自动完成值。

有人可以帮我解决这个问题吗？

这是我的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("");
        });
    });

    $(document).ready(function() {
        $("#to-input").keyup(function() {
            let searchText = $(this).val();
            if (searchText != "") {
                $.ajax({
                    url: "airports.php",
                    method: "post",
                    data: {
                        query: searchText,
                    },
                    success: function(response) {
                        $("#to-show-list").html(response);
                    },
                });
            } else {
                $("#to-show-list").html("");
            }
        });
        // Set searched text in input field on click of search button
        $(document).on("click", "a", function() {
            $("#to-input").val($(this).text());
            $("#to-show-list").html("");
        });
    });
</script>

这是php

require_once 'includes/config.php';

if (isset($_POST['query'])) {
    $inpText = $_POST['query'];
    $sql = 'SELECT * FROM pt_flights_airports WHERE cityName LIKE ? OR name LIKE ? OR code LIKE ?';
    $stmt = $db->prepare($sql);
    $stmt->execute(array('%'.$inpText.'%','%'.$inpText.'%','%'.$inpText.'%'));
    $result = $stmt->fetchAll();

    if ($result) {
        foreach ($result as $row) {
        echo '<a href="#" class="list-group-item list-group-item-action border-1">'.$row['cityName'].' ('.$row['code'].') - <small>'.$row['name'].'</small></a>';
    }
    } else {
        echo '<p class="list-group-item  border-1">Airport not listed!</p>';
    }
}

感谢你的帮助

标签： javascriptjquery

解决方案

问题是由于链接上的点击功能而出现的。通过指定包含这些链接的 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>

推荐阅读