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
– Covik, Commented Mar 2, 2016 at 7: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
– androidnation, Commented Mar 2, 2016 at 7:53
$('#tag').keyup(function() { console.log($(this).val()); }); — Covik
– Covik, Commented Mar 2, 2016 at 9:03

Covik · Accepted Answer · 2016-03-02 14:17:42Z

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 2, 2016 at 14:17

answered Mar 2, 2016 at 10:06

Covik

8628 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

androidnation Over a year ago

I can see the array result in the XHR but nothing is displayed as autocomplete at search text box

Covik Over a year ago

Can you provide an image of XHr results? Also try alerting availableTags just before calling autocomplete. Try changing #tags into #tag

androidnation Over a year ago

wait I will upload an image for you sir in the question

Covik Over a year ago

I need a response not headers. Have you tried changing #tags into #tag

androidnation Over a year ago

I upload the response now see it please

|

Shiva · Accepted Answer · 2016-03-02 07:34:09Z

0

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

answered Mar 2, 2016 at 7:34

Shiva

5672 gold badges5 silver badges12 bronze badges

2 Comments

androidnation Over a year ago

I will try it. But first, nothing is sent to PHP code. In XHR I have that term is empty

Shiva Over a year ago

then try this stackoverflow.com/questions/5077409/…

Collectives™ on Stack Overflow

Using php and MySQL to get data into jQuery UI availableTag

2 Answers 2

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related