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

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

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

这是我的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>';
    }
  }

require_once'includes/config.php'；
如果（isset（$_POST['query']））{
$inpText=$\u POST['query']；
$sql='SELECT*FROM pt_cityName LIKE:cityName'的城市；
$stmt=$db->prepare（$sql）；
$stmt->execute（['cityName'=>'%.$inpText'%'）；
$result=$stmt->fetchAll（）；
如果（$结果）{
foreach（$结果为$行）{
回声'；
}
}否则{
echo'
无记录；
}
}

这是我的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>

$（文档）.ready（函数（）{
//将搜索文本发送到服务器
$（“.search”）.keyup（函数（）{
让searchText=$（this.val（）；
如果（searchText！=“”）{
$.ajax({
url:“search.php”，
方法：“张贴”，
数据：{
查询：searchText，
},
成功：功能（响应）{
$（“.show list”）.html（响应）；
},
});
}否则{
$（“.show list”）.html（“”）；
}
});
//单击“搜索”按钮，在输入字段中设置搜索文本
$（文档）。在（“单击”、“a”上，函数（）{
$（“.search”）.val（$（this.text（））；
$（“.show list”）.html（“”）；
});
});

我的表格是这样的

<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>

从…起
到

---

提前感谢您的帮助

欢迎！如果我理解正确，问题是一个输入的自动完成结果会显示在两个div中，class

show list

。问题是：

$(".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>

---

谢谢，伙计，但是现在结果没有被点击对不起，你说结果没有被点击是什么意思？因为这两个函数不起作用，或者

show list

div中生成的结果现在不起作用？结果正在被提取，但是当我点击它时，在输入框中没有输入任何内容。在这些更改之前，点击结果是否按预期工作？如果不是，则在声明事件侦听器后动态生成的这些

a

元素可能存在问题。

$("#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("");
    }
  });