Bootstrap typeahead 使用 AJAX PHP 和 MySQL 不显示数据答案

【问题标题】：Bootstrap typeahead using AJAX PHP and MySQL not showing dataBootstrap typeahead 使用 AJAX PHP 和 MySQL 不显示数据
【发布时间】：2019-05-19 05:08:53
【问题描述】：

我发布了所有显示数据后端但前面未显示数据的图像。我的代码不起作用。

我的代码在控制台和浏览器网络中获取数据并显示数据，但没有在像谷歌这样的文本框下显示建议我必须检查所有内容但没有得到任何想法

我不明白。

          <!DOCTYPE html>
          <html>
       <head>
         <title>Webslesson Tutorial | Autocomplete Textbox using Bootstrap Typehead with Ajax PHP</title>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />



     </head>
       <body>
     <br /><br />
      <div class="container" style="width:600px;">
      <h2 align="center">Autocomplete Textbox using Bootstrap Typeahead with Ajax PHP</h2>
    <br /><br />
    <label>Search Country</label>
    <input type="text"  name="country" id="country" class="form-control input-lg" autocomplete="off"  placeholder="Type Country Name" />
      </div>
    </body>
   </html>


            <script>
            $(document).ready(function() {
            $('#country').typeahead({
            source: function(query, result) {
                $.ajax({
               url: "autoselect_jquery2.php", // send request to a separate file         
        method: "POST",
        data: {
          query: query
        },
        dataType: "json",
        success: function(data) {
          result($.map(data, function(item) {

            return item;
          }));

              }
         })
               }
         });

        });
         </script>



            //autoselect_jquery2.php
         <?php
         //Assume this line is correct and that you have a database.php file containing your log in credientials
            include 'database.php';

        //If Statement says - run this next piece of code if $_POST['query'] is set to something 
            if (isset($_POST['query']))
     {

       // $search_query = $_POST['query']; - Commented OUT
      //This line attempts to sanatise the input from the posted data
      $search_query = mysqli_real_escape_string( $_POST["query"]);

            //This line constructs the whole SQL statement ( BAd methodology here, but thats a different topic)
            $query = "SELECT * FROM transporter WHERE email LIKE '%".$search_query."%' LIMIT 12";

         //You've commented out the next line and its of no use
          // $query = "SELECT * FROM transporter WHERE address LIKE  %' 

       //This line has a syntax error - but is also of no use - Should delete but should read  $search_query = ' LIMIT 12';
    //$search_query ' LIMIT 12";

       /// This line queries the database
    $result = mysqli_query($link, $query);

       //This line declares $data will be an array
    $data = array();

       //If the DB returns some rows
        if(mysqli_num_rows($result) > 0)
       {
       // While there are results
           while($row = mysqli_fetch_assoc($result))
       {
          //add to the $data array
           $data[] = $row["email"];
        }
          //Output $data in JSON format to be interpreted as a response from your ajax call
           echo json_encode($data);
     }
     }
       ?>

【问题讨论】：

无论您提到什么，我都在使用相同的代码，并且我也尝试过您的代码。它工作正常。问题可能出在您的搜索数据上。从您的数据库中搜索可用数据
localdp.com/select_autosearch2.php
检查此链接但不起作用

标签： php mysql ajax bootstrap-4 typeahead

【解决方案1】：

当您向同一个文件发送请求时，它不起作用。将文件一分为二。

你在autoselect_jquery2.php中的html

<!DOCTYPE html>
<html>

<head>
  <title>Webslesson Tutorial | Autocomplete Textbox using Bootstrap Typehead with Ajax PHP</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>

<body>
  < br /><br />
  <div class="container" style="width:600px;">
    <h2 align="center">Autocomplete Textbox using Bootstrap Typeahead with Ajax PHP</h2>
    <br /><br />
    <label>Search Country</label>
    <input type="text" name="country" id="country" class="form-control input-lg" autocomplete="off" placeholder="Type Country Name" />
  </div>
  <script>
    $(document).ready(function() {
      $('#country').typeahead({
        source: function(query, result) {
          $.ajax({
            url: "search.php", // send request to a separate file
            method: "POST",
            data: {
              query: query
            },
            dataType: "json",
            success: function(data) {
              result($.map(data, function(item) {
                return item;
              }));

            }
          })
        }
      });

    });
  </script>
</body>
</html>

创建一个新文件search.php。更改 ajax url 指向url: "search.php",

<?php
//Assume this line is correct and that you have a database.php file containing your log in credientials
include 'database.php';

//If Statement says - run this next piece of code if $_POST['query'] is set to something 
if (isset($_POST['query'])) {

  // $search_query = $_POST['query']; - Commented OUT
  //This line attempts to sanatise the input from the posted data
  $search_query = mysqli_real_escape_string($_POST["query"]);

  //This line constructs the whole SQL statement ( BAd methodology here, but thats a different topic)
  $query = "SELECT * FROM transporter WHERE email LIKE '%" . $search_query . "%' LIMIT 12";

  //You've commented out the next line and its of no use
  // $query = "SELECT * FROM transporter WHERE address LIKE  %' 

  //This line has a syntax error - but is also of no use - Should delete but should read  $search_query = ' LIMIT 12';
  //$search_query ' LIMIT 12";

  /// This line queries the database
  $result = mysqli_query($link, $query);

  //This line declares $data will be an array
  $data = array();

  //If the DB returns some rows
  if (mysqli_num_rows($result) > 0) {
    // While there are results
    while ($row = mysqli_fetch_assoc($result)) {
      //add to the $data array
      $data[] = $row["email"];
    }
    //Output $data in JSON format to be interpreted as a response from your ajax call
    echo json_encode($data);
  }
}
?>

【讨论】：

在你的成功函数中添加控制台日志console.log(data);
console.log(data);我已经发布了 autoselect_jquery2.php 我已更改但没有找到结果先生请帮助我是初学者我不知道如何完成我的代码请帮助
localdp.com/select_autosearch2.php 先生，您可以在检查响应中检查所有代码
先生给你发邮件
检查上面的代码 // autoselect_jquery2.php php 代码请告诉我帮助我