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

我们可以通过多种方式实现这一点..

在上面，每个都得到类似

的格式

var availableTags = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++",
  "Clojure",
  "COBOL",
  "ColdFusion",
  "Erlang",
  "Fortran",
  "Groovy",
  "Haskell",
  "Java",
  "JavaScript",
  "Lisp",
  "Perl",
  "PHP",
  "Python",
  "Ruby",
  "Scala",
  "Scheme"
];

我的意思是在你的 foreach

$copy = $output;

foreach ($output as $o)
{
  echo ' " '.$o. ' " ';
  if (next($copy )) {
    echo ','; // Add comma for all elements instead of last
    $response['patient_name'] = $o['patient_name'];
 }
}
return $response;

并将其分配给 JavaScript 变量，如

 availableTags = [response];

希望有所帮助:)

Answer 2

我认为你应该得到所有没有 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 我们不需要 post 数据

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

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

使用 php 和 MySQL 将数据放入 jQuery UI availableTag

Using php and MySQL to get data into jQuery UI availableTag

php

mysql

jquery

jquery-plugins