How do I use php to feed data to jQuery autocomple

Question

I'm trying to build a form where certain text fields and text areas have autocomplete.

I've used the formidable plugin for wordpress to build my form. I'm using the jQuery autocomplete plugin for the autocomplete part.

The code looks like this:

<script>

            $(document).ready(function(){
                var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
            $("#example").autocomplete(data);
  });
  </script>

So basically I need to use php to pull data from the mysql database and feed it to that data var. I'm a php newbie, so I'm not sure how to do this. A coder who works on the formidable plugin suggested the following code for the var data part:

 <?php
global $frm_entry_meta;
$entries = $frm_entry_meta->get_entry_metas_for_field($field_id, $order='');
?> //db_frm_entry_metas is the name of the mysql db that stores the values for every field from the form. I suspect get_entry_metas_for_field is a function added by the formidable plugin. $field_id is the id for a given field on the form. 
var data = new Array();
<?php foreach($entries as $value){ ?>
data[] = <?php echo $value ?>;

<?php } ?>

I tried to run this code with an id number in the place of $field_id, but it didn't work. I'm stuck here.

I can understand most of the code, except for this part:

var data = new Array();
<?php foreach($entries as $value){ ?>
data[] = <?php echo $value ?>

I don't get what the data[] is doing there... should the php be feeding the data to the var data= line?

I have around 15 form text/textarea fields, each of which needs to pull data associated with its given field_id. Unless there's an easier way to do this, this means I'll have to write 15 scripts, each with a particular $field_id and jQuery object with field's css selector.

Any help getting this to work would be much appreciated!

Answer 1

The coder is wrong, this:

data[] = something;

will cause a syntax-error in JS, it's a PHP-shorthand for pushing members to an array and doesn't work in JS.

Try this:

data.push(unescape('<?php echo rawurlencode($value); ?>');

Answer 2

your jquery will be something like this

$("#example").change(function(){
$.ajax( 
        { 
            type: "POST", 
            url: "php_page.php", 
            data: "data=" + $("#example").val(),
            beforeSend: function() {
                // any message or alert you want to show before triggering php_page.php
            },
            success: function(response) {
                eval(response);
                // print your results
            }

         });
});

in your php page after getting all info echo the results like this.

echo "var result=" . json_encode($results);

then eval(response) jquery function will give you javascript variable result with your results in it. Hope this helps...

Answer 3

According to the autocomplete docs, you can pass a url as the data parameter. That being said, do something such as the following:

<?php
  // --- PLACE AT VERY TOP OF THE SAME FILE ---
  $search = isset($_GET['q']) && !empty($_GET['q']) ? $_GET['q'] : null;
  if (!is_null($search))
  {
    $matches = Array();
    // some search that populates $matches based on what the value of $search is
    echo implode("\r\n",$matches);
    exit;
  }
?>

then, in your jQuery code replace the .autocomplete(data) with .autocomplete('<?php echo $_SERVER['PHP_SELF']; ?>');