jQueryUI autocomplete with PHP and JSON

Question

I have a simple search box that is going to set a user's location from available entries in my database. I'm trying to get jQuery UI's autocomplete to work but am running into issues. With the JavaScript Console turned on in Chrome I see no response from the script as I begin to type.

The desired result is a dropdown autocomplete list that lists cities in "City, State" format. I've looked at several posts here on SO and have modified my code in many attempts to resolve this issue but no luck. Thanks in advance to any guidance / fixes. Much appreciated.

Here's my jQuery UI code (I am using the most current libraries hosted by code.jquery.com)

<script type="text/javascript">
$(document).ready(function()
{
    $('#locale').autocomplete(
    {
        source: "./state_autocomplete.php",
        minLength: 2
    });
});
</script>

Here's my form code:

<form name="frm_set_locale" method="post" action="/index2.php">
  <input type="text" name="locale" id="locale" class="textbox">
  <input type="submit" class="button" name="frm_submit_locale" value="Search">
</form>

And here's the mysqli script that pulls the information

<?php
include "/includes/dbconn.php";

// Query to get the usable locations
    $locale = trim($_GET['term']);
    $return = array();

    $q = "SELECT `city`, `state` FROM `locales` WHERE `city` LIKE '%".$locale."%'";
    $r = mysqli_query($q, $connect);

    $json = "[";
    $first = true;

    while ($row = mysqli_fetch_assoc($r, $connect)){
        if(!$first){
            $json .=  ",";
        }else{
            $first = false;
        }

        $json .= "{'value':'".$row['city'].", ".$row['state']."}";
    }

    $json .= "]";

    echo $json;
?>

Answer 1

1st A Literal for State value is required..

"{'value':'".$row['city'].", 'state':".$row['state']."}"

2nd You've to request data by Ajax post

<script type="text/javascript">
$(document).ready(function()
{
          $.ajax({
               url: '/state_autocomplete.php',
               type: 'POST',
               dataType: 'json',
               success: function(data){
                     $('#locale').autocomplete(
                     {
                           source: data,
                           minLength: 2
                     });
               }
          });
});
</script>

Answer 2

Thanks for all the help. I took a new approach to the state_autocomplete.php and here is what got it working for me. Really clean.

<?php
// Database Connection
    include "/includes/dbconn.php";

// Query to get the usable locations
    $locale = $_GET['term'];

    $q = "SELECT `city`, `state` FROM `locales` WHERE `city` LIKE '%$locale%'";
    $r = mysqli_query($connect, $q);            

    $city_state = array();
    while($row = mysqli_fetch_assoc($r)){
        $result = $row['city'].", ".$row['state'];
        array_push($city_state, $result);
    }
    $json = json_encode($city_state);
    echo $json;
?>

Answer 3

The auto complete function you're using doesn't do an ajax call with the query string as you intended from <input type="text" name="locale" id="locale" class="textbox">

For it work change

$q = "SELECT `city`, `state` FROM `locales` WHERE `city` LIKE '%".$locale."%'";

to

$q = "SELECT `city`, `state` FROM `locales`";

The script will then generate all the cities and states then the auto complete function will match on the users input.