在多个输入字段中使用自动完成

Question

希望所有人都做得很好。好吧，我遇到了一个问题，我希望在相同表单的 2 个输入字段中显示数据库中的城市名称，但每次我在两个输入字段上选择时，都会选择相同的值。

如果有人可以查看我的代码并帮助我解决这个问题，我们将不胜感激。

这是我的 search.php

require_once 'includes/config.php';

  if (isset($_POST['query'])) {
    $inpText = $_POST['query'];
    $sql = 'SELECT * FROM pt_cities WHERE cityName LIKE :cityName';
    $stmt = $db->prepare($sql);
    $stmt->execute(['cityName' => '%'.$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'].')</a>';
      }
    } else {
      echo '<p class="list-group-item border-1">No Record</p>';
    }
  }

这是我的 js

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
            <script>
            $(document).ready(function () {
  // Send Search Text to the server
  $(".search").keyup(function () {
    let searchText = $(this).val();
    if (searchText != "") {
      $.ajax({
        url: "search.php",
        method: "post",
        data: {
          query: searchText,
        },
        success: function (response) {
          $(".show-list").html(response);
        },
      });
    } else {
      $(".show-list").html("");
    }
  });
  // Set searched text in input field on click of search button
  $(document).on("click", "a", function () {
    $(".search").val($(this).text());
    $(".show-list").html("");
  });
});
    </script>

我的表单看起来像这样

<div class="col-sm-12">
                    <label class="form-label-outside">From</label>
                    <div class="form-wrap form-wrap-inline">
                       <input class="form-input search" name="from" type="text" >
                       <div class="list-group show-list">        
                    </div>
                    </div>
                  </div>
                  <div class="col-sm-12">
                    <label class="form-label-outside">To</label>
                    <div class="form-wrap form-wrap-inline">
                      <input class="form-input search"  name="to" type="text" >
                       <div class="list-group show-list">        
                    </div>
                    </div>
                  </div>

提前感谢您的帮助

Answer 1

欢迎！如果我理解正确，问题是您的一个输入的自动完成结果出现在两个具有show-list 类的 div 中。问题是：

$(".show-list").html(response)

由于".show-list" 选择了具有"show-list" 类的两个div，因此编辑了两个div 的HTML，即使您只关注一个输入的值。您必须以某种方式区分两个 show-list div 及其各自的输入。为什么不给每个元素一个 ID 并制作两个独立的 jQuery 事件监听器？

...
<input id="from-input" class="form-input search" name="from" type="text">
<div id="from-show-list" class="list-group show-list"></div>
...
<input id="to-input" class="form-input search"  name="to" type="text">
<div id="to-show-list" class="list-group show-list"></div>

$("#from-input").keyup(function () {
    let searchText = $(this).val();
    if (searchText != "") {
      $.ajax({
        url: "search.php",
        method: "post",
        data: {
          query: searchText,
        },
        success: function (response) {
          $("#from-show-list").html(response);
        },
      });
    } else {
      $("#from-show-list").html("");
    }
  });

$("#to-input").keyup(function () {
    let searchText = $(this).val();
    if (searchText != "") {
      $.ajax({
        url: "search.php",
        method: "post",
        data: {
          query: searchText,
        },
        success: function (response) {
          $("#to-show-list").html(response);
        },
      });
    } else {
      $("#to-show-list").html("");
    }
  });