Twitter Typeahead not showing suggestions

I am having issues getting twitter typeahead working with Tag Manager in Wordpress.

Tag Manager is working.

From what I can see all js scripts are loading and the json php file IS preloading. Verified in inspector.

This tag div is located inside of a bootstrap grid if that matters.

HTML

            <div class="span6 cs_gray_t">
                <div id="prefetch">
                    <input type="text" name="tags" id="inTags" placeholder="Enter Tags" class="typeahead tm-input tm-tag-success" autocomplete="off" size="20" />
                </div>
                <p>Text...</p>
                <p>Text...
<!-- list a few random tags to help get them started --> 
<?php
    $i = 1;
    foreach ($topCharTags as $ts){
        echo $ts;
        if ($i < 10){
            echo ", ";
        }
        $i++;
    }
?>
                </p>
            </div>

That is the HTML block and here is my JS.

 var countries = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.whitespace,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  limit: 10,
  prefetch: '../../../wp-content/themes/ata-child-files/js/json-tagbuild.php'
});

countries.initialize();

console.log(countries);
var tagApi = jQuery(".tm-input.tm-input-typeahead").tagsManager({
    prefilled: [<?php echo $existingTags ?>],
    blinkBGColor_1: '#FFFF9C',
    blinkBGColor_2: '#CDE69C',
    maxTags: 20,
    tagsContainer: "#divTagBox"
});
jQuery(".tm-input.tm-input-typeahead").typeahead(null, {
  source: countries.ttAdapter()
}).on('typeahead:selected', function (e, d) {
    tagApi.tagsManager("pushTag", d.name);
});

So I am trying to use the example from the their website for the prefetch with very few changes. I just can't understand why it's not working.

When looking at the source of the example I see it renders pre elements that it then fills with the suggestions. I do not see it doing that in my source.

Any help or suggestions would be greatly appreciated. I have been messing with this thing for days now and it just doesn't want to work.

This is mostly working but there is a problem with the line

source: countries.ttAdapter()
}).on('typeahead:selected', function (e, d) {
    tagApi.tagsManager("pushTag", d.name);

My JSON is a string and I think this function tackles an array of objects. How would I change this so it just uses the string?

Thank you for your help and suggestions!

I could not get Twitter Typeahead to work with Tag Manager. So instead I used jQuery UI Autocomplete. This worked great! So using the same HTML I use this JS instead. I just echo my JSON request as a var and it works great!

<script type="text/javascript">

jQuery(".tm-input").tagsManager({
    prefilled: [<?php echo $existingTags ?>],
    blinkBGColor_1: '#FFFF9C',
    blinkBGColor_2: '#CDE69C',
    maxTags: 20,
    tagsContainer: "#divTagBox"
});

</script>

<?php
$sqlJSON = "
    SELECT DISTINCT
      fyxt_tax_list.tax_term
    FROM
      fyxt_tax_list
    ORDER BY
      fyxt_tax_list.tax_term";
$resultJSON = $wpdb->get_col($sqlJSON);
?>

<script>
jQuery(document).ready(function($) {      
  $( function() {
    var availableTags = <?php echo json_encode($resultJSON); ?>;
    $( "#inTags" ).autocomplete({
      source: availableTags
    });
  });
});
</script>

I wish I would have just gone this route. Nice, clean, and easy code.