Jquery / Mysql: use mysql data for Auto Complete search tags in jquery?

Question

I have a html search bar like so:

<form id="testblah" action="search_results.php" method="GET">
<input type="text" name="search" class="Search_bar_box" id="search">
</form>

I am then using Jquery to auto complete the input of a search criteria using pre-defined tags like so:

<script>


$(function() {
    $('form').each(function() {
        $(this).find('input').keypress(function(e) {
            // Enter pressed?
            if(e.which == 10 || e.which == 13) {
                this.form.submit();
            }
        });


    });
});

  $(function () {

    var availableTags = [

        "Telehandlers",

        "Cranes",

        "Fork Attachments",

        "Aggreko",

        "12 Tonne Telhandlers",

        "Marwood",

        "Crane Suppliers in Manchester",

        "Total",

        "Oil, Gas & Lubricants",

        "Tomato Plant"

    ];

    $("#search").autocomplete({

        source: availableTags,
        select: function (event, ui) {
            window.location = 'search_results.php?search=' + ui.item.value;

        }

    });

    $('#searchForm').on("submit", function (event) {
        event.preventDefault();
        alert($('#search').val());
    });


});

  </script>

This all works fine, however, what I want to do now is change my tags from pre-defined text so that my tags are instead pulled from my MySQL data. so I am trying to run a MySQL query to get all data from my table like so:

<?php $query12 = "SELECT * FROM supplier_users, supplier_stats GROUP BY supplier_users.user_id"; 
      $result12 = mysql_query($query12);
       while($row1 = mysql_fetch_assoc($result12)) {
       $tags = $row1; } ?>

and then trying to place my string inside the jquery tags section like so:

$(function () {
var data = "<?= $tags ?>";
var availableTags = [


    data    ];

however this stops my jquery from working. Can someone please show me where I am going wrong and how I would need to do this. thanks in advance

1. Only 1 row will be shown right now 2. you need to echo $tags insidejavascript 3. you need to build the array inside tags as you should make it in javascript.. — Naruto
– Naruto, Commented Apr 28, 2015 at 9:57

IUW · Accepted Answer · 2015-04-28 10:33:30Z

2

You can edit your php code like the following,

<?php 
 $query12 = "SELECT * FROM supplier_users, supplier_stats GROUP BY supplier_users.user_id";
     $result12 = mysql_query($query12);
     $tags = array();
     while($row1 = mysql_fetch_assoc($result12)) {
      array_push($tags, $row1);
     } 
    ?>

and in java script as Naruto told replace the

var data = "<?= $tags ?>";

with the following

var data = "<?php echo json_encode($tags); ?>";
// array
var availableTags = JSON.parse(data);

Try to use this kind of solution.

edited Apr 28, 2015 at 10:33

answered Apr 28, 2015 at 10:22

IUW

4414 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

Jquery / Mysql: use mysql data for Auto Complete search tags in jquery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related