Qfyilyi

I am trying to implement the typeAhead Function. I am using the Symfony framework. But if doesnt seems to work.
The Error Im getting is

Uncaught ReferenceError: Bloodhound is not defined

I am very new to symfony and twig. Can someone point me out the why the code isnt working?

Twig

<div id="prefetch">

    <input class="typeahead" type="text" placeholder="Countries">

</div>

<script type="application/javascript">

    var countries = new Bloodhound({

        datumTokenizer: Bloodhound.tokenizers.whitespace,

        queryTokenizer: Bloodhound.tokenizers.whitespace,

        // url points to a json file that contains an array of country names, see

        // https://github.com/twitter/typeahead.js/blob/gh-pages/data/countries.json

        prefetch: '{{ path('typeAhead') }}'

    });



    // passing in `null` for the `options` arguments will result in the default

    // options being used

    $('#prefetch .typeahead').typeahead(null, {

        name: 'countries',

        source: countries

    });

</script>

Controller (Response)

/**

 * @Route("/typeAhead", name="typeAhead")

 */

public function typeAheadAllAction(Request $request)

{

    $products=$this->getDoctrine()->getRepository(products::class)->findAll();



    $pr_name=array();

    foreach($products as $product){

        $name=$product->getName();

        array_push($pr_name,$name);

    }



    return new Response(json_encode(array($pr_name)),100);

}

Controller (rendering the twig file)

/**

 * @Route("/test", name="test")

 */

public function testAction(Request $request)

{

    return $this->render('typeahead.html.twig', array(

    ));



}

Welcome to Stack Overflow.

Maybe you are pointing to this example page, and you want to implement Bloodhood (typeAhead's suggestion engine).

If so, please consider adding typeahead.bundle.js which has both typeAhead & Bloodhood (you may inspect the page and see the link there below jQuery):

<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>