php - 使用 php 和 MySQL 将数据获取到 jQuery UI availableTag

Question

编辑

现在的脚本是:

<script>
$('#tag').keyup(function() { 
  console.log($(this).val());
  var termToSearch = $(this).val(); 
  $(function() {
    var availableTags;
    $.ajax({
      url: 'search_patient.php',
      type: 'POST',
      data: {term: termToSearch},
      dataType: 'JSON',

      success:function(output)
      {
        $.each( output, function(key, row)
        {
          availableTags = [row['patient_name']];
        });
        $( "#tags" ).autocomplete({
      source: availableTags
    });
      }

    });
    });
  });
  </script>

我可以在控制台中看到值，但仍然没有在搜索文本框中看到任何自动完成。

结束编辑

我正在尝试使用 jquery UI 库来实现自动完成功能，但使用 PHP 和 MySQL 填充数组。

我从 php 和 MySQL 代码开始，我需要根据我在搜索框中输入的内容获取患者姓名(实时自动完成搜索)

<?php
//Set error reporting on
error_reporting(E_ALL);
ini_set("display_errors", 1);

//Include connection file
require_once('../include/global.php');
//Json and PHP header
header('Content-Type: application/json');
//Getting Value from text box
$term = '%'.$_POST['term'].'%';

//Array to get data into it
$response = array();

//Query
$searchPatient = "SELECT * FROM patient WHERE patient_name LIKE :term";
$searchStmt = $conn->prepare($searchPatient);
$searchStmt->bindValue(":term", $term);
$searchStmt->execute();
if($searchStmt->rowCount() > 0){
    $output = $searchStmt->fetchall();
    foreach ($output as $o){
        $response['patient_name'] = $o['patient_name'];
    }
        return json_encode($response);
}
?>

在页面中我包含了 jquery UI 库，根据他们的推荐，他们使用了以下内容:

<script src="../include/jquery-1.12.1.min.js"></script>
<script src="../include/jquery-ui.min.js"></script>
<script>
  $(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
  </script>

我不知道如何使用 $.ajax 从 PHP 获取 $response 数组，并将其设置为 availableTag = response. Patient_name

我将其编辑为:

     <script>
  $(function() {
    var availableTags;
    var searchTerm = $("#tag").val();
    $.ajax({
      url: 'search_patient.php',
      data: {term: searchTerm},
      type: 'POST',
      dataType: 'JSON',

      success:function(response)
      {
        $.each( response, function(key, row)
        {
          availableTags = row['patient_name'];
        });
        $( "#tags" ).autocomplete({
      source: availableTags
    });
      }
    });

  });
  </script>

我的 XHR term 为空:

我有这个错误:

Notice: Undefined index: term in C:\wamp\www\dentist\pages\search_patient.php on line 13

编辑 Covic

Answer 1

我认为你应该让所有没有term的患者。您可以在服务器端创建 JS 数组，但也可以使用 AJAX 来完成。

<?php
//Set error reporting on
error_reporting(E_ALL);
ini_set("display_errors", 1);

//Include connection file
require_once('../include/global.php');
//Json and PHP header
header('Content-Type: application/json');


//Query
$searchPatient = "SELECT patient_name FROM patient";
$searchStmt = $conn->prepare($searchPatient);
$searchStmt->execute();
if($searchStmt->rowCount() > 0){
    $output = $searchStmt->fetchall();
    $output = array_values($output);
    echo json_encode($output);
}
?>

现在在 AJAX 中我们不需要发布数据

   <script>
  $(function() {
    var availableTags = [];
    $.ajax({
      url: 'search_patient.php',
      type: 'POST',
      dataType: 'JSON',

      success:function(response)
      {
        $.each( response, function(key, row)
        {
          availableTags.push(row['patient_name']);
        });
        $( "#tags" ).autocomplete({
      source: availableTags
    });
      }
    });

  });
  </script>

也许我做错了什么，因为我现在无法测试它，所以如果有任何错误我会修复它