How to get php database values to javascript array

Question

Hi here i am using the jquery auto-complete plugin. i have some php retrieved database values i want to use those values in the autocomplete plugin. for that i want to get the php values to javascript array. how can i do this?

$(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
    ];
    $( "#category" ).autocomplete({
      source: availableTags
    });
  });

Php:

<?php
require_once "config.php";
$q = strtolower($_GET["q"]);
if (!$q) return;
$sql = "select distinct(category) from completer";
$rsd = mysql_query($sql);
while($rs = mysql_fetch_array($rsd)) {
    $fname = $rs['category'];
    echo "$fname"
}
?>

Answer 1

Well, if you have the data store inside php variable, then you can add those values into javascript variable like so, no need for ajax stuff for this :

Supposed you have values inside php variable like :

$myPhpVar = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++",
  "Clojure",
  "COBOL",
  "ColdFusion",
  "Erlang",
  "Fortran",
];

Then in your js part should be :

$(function() {
  var availableTags = [];

  // start here - populate the data from php variable
  <?php foreach($myPhpVar as $key => $val) {?>
    availableTags.push('<?php echo $val;?>'); // push data into js variable
  <?php }?>
  // end here

  $( "#category" ).autocomplete({
    source: availableTags
  });
});

Answer 2

JS script :

$(function() {
    $.ajax({
        type : 'get',
        url : 'urlofmyfile.php',
        data : 'q='+q,
        dataType : 'json',
        success : function(availableTags){
            $( "#category" ).autocomplete({
              source: availableTags
            });
        }
    });

  });

$.ajax documentation : http://api.jquery.com/jquery.ajax/

PHP script :

  <?php
require_once "config.php";
$q = strtolower($_GET["q"]);
if (!$q) return;
$sql = "select distinct(category) from completer";
$rsd = mysql_query($sql);
while($rs = mysql_fetch_array($rsd)) {
    $fname[] = $rs['category'];
}
print json_encode($fname);
exit;
?>

json_encode documentation : http://php.net/manual/en/function.json-encode.php

Answer 3

There are several ways to achieve this.

Dynamic page generation.

You can dynamically get values from database and insert into the HTML as JSON object:

$(function() {
    var availableTags = <?php
        require_once "config.php";
        $q = strtolower($_GET["q"]);
        if (!$q) die("[]");
        $sql = "select distinct(category) from completer";
        $rsd = mysql_query($sql);
        $row = array();
        while($rs = mysql_fetch_assoc($rsd)) {
            $row[] = $rs['category'];
        }
        echo json_encode($row);
    ?>;
    $("#category").autocomplete({
        source: availableTags
    });
});

AJAX.

AJAX approach is almost the same but it is considered to be a better practice. In this case, PHP file is a separate file which returns only an object handled by JS.

PHP:

<?php
    require_once "config.php";
    $q = strtolower($_GET["q"]);
    if (!$q) die("[]");
    $sql = "select distinct(category) from completer";
    $rsd = mysql_query($sql);
    $row = array();
    while($rs = mysql_fetch_assoc($rsd)) {
        $row[] = $rs['category'];
    }
    echo json_encode($row);
?>

JS:

$(function() {
    $.ajax({
        url: 'yourPhp.php',
        data: 'q=' + q,
        dataType: 'json'
    }).done(function(dt) {     
        $("#category").autocomplete({
            source: dt
        });
    });
});