CODEWITHSUNDEEP
phpsymfonytwigtypeahead.js
user9520310
user9520310

Reputation:

Symfony-Twig TypeAhead Function

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(
    ));

}

Upvotes: 2

Views: 762

Answers (1)

Peyman Mohamadpour
Peyman Mohamadpour

Reputation: 17944

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>

Upvotes: 1

Related Questions