javascript - 建议文本输入字段

Question

我尝试创建一个建议文本输入字段，当用户输入一个字母例如 A 所有单词都包含字母A时，我会从mysql数据库中读取建议信息 出现在我使用 PHP 和 mysql 的输入字段下。

HTML

<label for="email">Location *</label>
  <input type="text" list="mylocation" id="suggest" name="txt_location">
        <datalist id="mylocation">

        </datalist>
    </div>

PHP代码

<?php
include("../includes/connect.php");
$location=$_GET['txt_location'];
$sql=mysqli_query($conn,"select DISTINCT(db_location) from tbl_marketing where db_location like '$location%' order by db_location")or die(mysqli_error($conn));
if(mysqli_num_rows($sql)>0){
    while($row=mysqli_fetch_array($conn)){
        $loc=$row['db_location'];
        echo"<option value='$loc'>";
    }}
?>

我的脚本

$(document).ready(function(){
   $("#suggest").keyup(function(){
      $.get("suggest.php",{location: $("#suggest").val()},function(data){
          $("datalist").empty();
          $("datalist").html(data);

      }); 
   }); 
});

我也在我的网站中使用 bootstrap问题是我的代码不起作用。有没有其他方法可以做到这一点，或者我可以使用 bootstrap 来做到这一点，什么是以及如何做到这一点？？!!

Answer 1

试试下面的代码。希望它有效。

$(document).ready(function(){
   $(document).on('keyup',"#suggest",function(){
      $.get("suggest.php",{txt_location: $("#suggest").val()},function(data){
          console.log(data);
          $("#mylocation").empty();
          $("#mylocation").append(data);
      }); 
   }); 
});

故障排除步骤:

1. 检查数据列表是否正常工作。 (添加一些虚拟 <option> 集)
2. 检查 suggest.php 是否已连接并为您提供结果。使用 console.log .

基本上您的脚本是正确的，除了 txt_location和 location即键值对不匹配。