Using php and MySQL to get data into jQuery UI availableTag

Question

EDIT

The script now is:

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

I can see in the console values but still have not seen any auto-complete on the search text box.

END EDIT

I am trying to use jquery UI library for auto-complete feature, but with an array filled using PHP and MySQL.

I started with the php and MySQL code, where I need to get patient names according to what I am typing in the search box (live auto-complete search)

<?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);
}
?>

In the page I included the jquery UI library, and according to their recommendation, they used the following:

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

I can't figure out how to use $.ajax to get the $response array from PHP, and put it as availableTag = response.patient_name

I edited it to:

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

I had at the XHR term as empty:

And I have this error:

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

EDIT FOR Covic

Try debugging `searchTerm` before ajax with `alert(searchTerm);` — Covik, Mar 02 '16 at 07:43
when it loads the page I got an empty alert. But when I typed inside the search box, I didn't get any alert — androidnation, Mar 02 '16 at 07:53
`$('#tag').keyup(function() { console.log($(this).val()); });` — Covik, Mar 02 '16 at 09:03

Covik · Accepted Answer · 2016-03-02T14:17:42.773

1

I think you should get all patients without term. You can create JS array on the server side but it can be done with AJAX too.

<?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);
}
?>

Now in AJAX we don't need post data

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

Maybe I done something wrong because I can't test it right now so if there are any errors I'll fix it

edited Mar 02 '16 at 14:17

answered Mar 02 '16 at 10:06

Covik

746
6
15

I can see the array result in the XHR but nothing is displayed as autocomplete at search text box – androidnation Mar 02 '16 at 10:28
Can you provide an image of XHr results? Also try alerting `availableTags` just before calling autocomplete. Try changing `#tags` into `#tag` – Covik Mar 02 '16 at 10:51
wait I will upload an image for you sir in the question – androidnation Mar 02 '16 at 11:03
I need a response not headers. Have you tried changing `#tags` into `#tag` – Covik Mar 02 '16 at 11:47
I upload the response now see it please – androidnation Mar 02 '16 at 12:30
nope, I can see the result in the response but can't see at the text box suggestion – androidnation Mar 04 '16 at 14:43

score 0 · Answer 2 · answered Mar 02 '16 at 07:34

we can achieve this in so many ways..

in the above for each get the format which is like

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

i mean in your 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;

and assign this to JavaScript variable like

 availableTags = [response];

hope helps :)

I will try it. But first, nothing is sent to PHP code. In XHR I have that term is empty — androidnation, Mar 02 '16 at 07:54
then try this http://stackoverflow.com/questions/5077409/what-does-autocomplete-request-server-response-look-like — Shiva, Mar 02 '16 at 08:42

Using php and MySQL to get data into jQuery UI availableTag

2 Answers2