JQuery Tag It Plugin Auto Complete from MYSQL Database using AJAX and JSON

Question

I am trying to use the JQuery plugin Tag It to source its auto-complete data from a MySQL database as well as the tag id. This my php file tag.php:

<?php
require('database-connect.php');

header('Content-type: application/json');

if ($stmt = $mysqli->prepare("SELECT tid, tag FROM list")) { 
    $stmt->execute(); // Execute the prepared query.
    $stmt->store_result();
    $stmt->bind_result($tid, $tag);
    while ($stmt->fetch()) {
        $arr[$tid] = $tag;
    }
}

echo json_encode($arr);

?>

This echos the following: {"1":"a","2":"b",...,"16":"z"}

I then use the following javascript to use the Tag It function:

$(function(){
    var myTags = $('#edit');
    myTags.tagit({
        allowSpaces: true,
        removeConfirmation: true,
        autocomplete: {
            source: 'core/tag.php'
        }
    });
});

What I want to happen is that when a user types in the Tag It box, a list of tags from the database appears, but when they eventually submit the form, the id (called 'tid' in this example) is sent to the php script that processes the form, with this sort of system: how can i create a tagging system using php and mysql?

At the moment no auto-complete appears when the user types in the Tag It box, but the rest of the plugin works. Can anyone help me get the auto-complete to appear and also get the tag id to be placed in the form so it is processed when the user submits?

Many thanks for your time.