CODEWITHSUNDEEP
symfonytypeahead.jsbloodhound
L.S
L.S

Reputation: 399

symfony2.7, bloodhound, typeahead not showing autocomplete

i'm trying to use typeahead with symfony 2.7 for database search using LIKE. I've read the documentation for typeahead and based on the examples from their website i put togther a small example to see how it works. Since i have about 1300 entries in the table where i perform search i generated a json file with all the entries for performance. The problem is that typeahead doesn't show any info from remote or from prefetch and i don't understand why it doesn't work because i didn't make too many changes to the original code from the examples. For the moment the generated result contains dummy data from the examples page because i was thinking there is something wrong with the results returned from remote. Maybe i'm missing something and i can't see the solution. I checked the console and i don't get any errors, bloodhound is loaded before typeahead both are loaded fine and the js file is loaded after them and it shows the content.

Javascript File:

    var url = Routing.generate('ajax_search', {name: 'query'});
// Trigger typeahead + bloodhound
var products = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: '/json/result.json',
     remote: {
      url: url,
      wildcard: 'query'
    }
});

products.initialize();

$('#products_forms .typeahead').typeahead({
    name: 'product',
    displayKey: 'value',
    source: products.ttAdapter()
});

the html test file

{% extends '::base.html.twig' %}
{% block body %}
<div class="col-sm-10" id="product">
    <input type="text" placeholder="Product" id="product" name="product" class="form-control typeahead">
</div>
{% endblock %}

The dummy file generated from php

cat result.json

            {"stateCode": "CA", "stateName": "California"},
            {"stateCode": "AZ", "stateName": "Arizona"},
            {"stateCode": "NY", "stateName": "New York"},
            {"stateCode": "NV", "stateName": "Nevada"},
            {"stateCode": "OH", "stateName": "Ohio"}

Upvotes: 0

Views: 259

Answers (1)

L.S
L.S

Reputation: 399

seems it works like this:

javascript:

$(document).ready(function() {
    var url = Routing.generate('ajax_search', {name: 'WILDCARD'});
    // Trigger typeahead + bloodhound
    var products = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        identify: function(obj) { return obj.team; },
        prefetch: 'json/result.json',
        remote: {
          url: url,
          wildcard: 'WILDCARD',
        }
    });

    products.initialize();

    $('#products_forms .typeahead').typeahead({
      minLength: 3,
      highlight: true
    },
    {
      name: 'product',
      display: 'team',
      source: products.ttAdapter()
    });
});

Upvotes: 0

Related Questions