bootstrap typeahead in joomla not accepting source array

Question

I have an issue with Bootstrap v2.3.1 typeahead in Joomla 1.5 - it works fine only when I use data-source='["..."]' method inside the input tag, but won't accept a remote php generated mysql query which is json-encoded.

Here is my code, as copied from a tutorial:

<input type="text" id="search" data-provide="typeahead"/>
<script>    
$(function(){
    $("#appendedInputButton").typeahead({
        source: function(query, process) {
            $.ajax({
                url: 'http://www.mydomain.com/source.php',
                type: 'POST',
                data: {q: query},
                dataType: 'JSON',
                async: true,
                success: function(data) {
                    process(data);
                }
            })
        }
    })
})
</script>

and here is the simplified source.php which outputs the json-encoded array:

//joomla required stuff   
define( '_JEXEC', 1 );
define('JPATH_BASE', dirname(__FILE__) );
define( 'DS', DIRECTORY_SEPARATOR );
require_once ( JPATH_BASE .DS.'includes'.DS.'defines.php' );
require_once ( JPATH_BASE .DS.'includes'.DS.'framework.php' );
$mainframe =& JFactory::getApplication('site');
$mainframe->initialise();
$db = &JFactory::getDBO();

$array = array();
$array[] = "item1";
$array[] = "item2";
$array[] = "item3";
//this is just for testing

echo json_encode($array);

I tested the output using a simple jQuery ajax load after button click, and it prints out the array, but I can't get it to work with typeahead.Also - typeahead doesn't even work if I supply the array like this:

var colors = ["red", "blue", "green", "yellow", "brown", "black"];
$('#search').typeahead({source: colors});

Any help is appreciated - I don't know if it is a Joomla problem, my code, or something else.

Answer 1

For anyone considering this - I couldn't make the bootstrap typeahead work in my joomla 1.5 site, used typeahead.js instead, and it works fine > link