建议文本输入字段

时间:2017-02-03 07:43:40

标签: javascript php jquery mysql ajax

我尝试创建一个建议文本输入字段,当用户输入字母时,从mysql数据库中读取建议信息 A 所有单词都包含字母 A 出现在输入字段下我使用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来做它是什么和怎么做?? !!

2 个答案:

答案 0 :(得分:0)

尝试以下代码。希望它有效。

$(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. 检查datalist是否正常工作。 (添加一些虚拟<option>集)
  2. 检查 suggest.php 是否已连接并为您提供结果。使用console.log
  3. 基本上您的脚本是正确的,但txt_locationlocation除外,即键值对不匹配。

答案 1 :(得分:0)

试试这个PHP代码

<?php
include("../includes/connect.php");
$location=$_GET['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'>";
    }
}
?>