bassjobsen / Bootstrap-3-Typeahead

The Typeahead plugin from Twitter's Bootstrap 2 ready to use with Bootstrap 3 and Bootstrap 4
1.68k stars 1.33k forks source link

Typeahead is not working at all #284

Open aidonsnous opened 7 years ago

aidonsnous commented 7 years ago

I am trying to display a suggestion list but nothing is working. Here is my html input : <input type="text" required data-provide="typeahead" autocomplete="off" placeholder="Complete Name or Description" id="offer-name" name="name" class="form-control" />

Here is my Javascript:

// instantiate the bloodhound suggestion engine
        var suggestedProducts = new Bloodhound({
            datumTokenizer: function (datum) {
                return Bloodhound.tokenizers.whitespace(datum.value);
            },
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            remote: {
                url: '/suggestproduct/%search',
                filter: function (products) {
                    return $.map(products.results, function (product,ind) {
                        return {
                            value: product.name,
                            id: product.idproduct,
                            default_img: product.defaultimg
                        };
                    });
                },wildcard:'%search'
            }
        });

        //// initialize the bloodhound suggestion engine
        suggestedProducts.initialize();
        var typeaheadInput = $('input[name=name]');
        typeaheadInput.typeahead({
            items:5,
            minLength: 2,
            hint: true,
            highlight: true,
            displayKey: 'value',
            source: suggestedProducts.ttAdapter(),
            templates: {
                suggestion: Handlebars.compile("<div style='padding:6px'><img width=50 height=50 class='img-responsive' src='{{default_img}}'> <b>{{value}}</b></div>")
            }
       });
       typeaheadInput.on("change", function () {

           var current = typeaheadInput.typeahead("getActive");
           if (current) {
               console.log("ID of the product is : " + current.id);
               $("input[name=idproduct]").val(current.id);
           }
       });

What is making my code to not show the suggestion dropdown? The data are being provided well by the server as follow:

{"results":[{"name":"COCA-COLA .5 L 6 PK PLASTIC BOTTLES?","idproduct":16,"defaultimg":"http://makglobal.com/images/coca_cola_usa/4900002468.jpg"},{"name":"COCA-COLA .5 L BUY 6 GET 2 FREE 8 PK PLASTIC BOTTLES?","idproduct":17,"defaultimg":"http://makglobal.com/images/coca_cola_usa/4900005295.jpg"},{"name":"COCA-COLA .5 L PLASTIC BOTTLE?","idproduct":49,"defaultimg":"http://makglobal.com/images/coca_cola_usa/4900000620.jpg"},{"name":"COCA-COLA 1 L 3 PK PLASTIC BOTTLES?","idproduct":18,"defaultimg":"http://makglobal.com/images/coca_cola_usa/4900005036.jpg"},{"name":"COCA-COLA 1 L PLASTIC BOTTLE?","idproduct":50,"defaultimg":"http://makglobal.com/images/coca_cola_usa/4900000522.jpg"},{"name":"COCA-COLA 1.5 L PLASTIC BOTTLE?","idproduct":51,"defaultimg":"http://makglobal.com/images/coca_cola_usa/4900002283.jpg"},{"name":"COCA-COLA 12 OZ 20 PK CANS?","idproduct":22,"defaultimg":"http://makglobal.com/images/coca_cola_usa/4900001463.jpg"},{"name":"COCA-COLA 12 OZ 24 PK CANS?","idproduct":23,"defaultimg":"http://makglobal.com/images/coca_cola_usa/4900001278.jpg"},{"name":"COCA-COLA 12 OZ 24 PK PLASTIC BOTTLES? COKE","idproduct":24,"defaultimg":"http://makglobal.com/images/coca_cola_usa/4900005276.jpg"},{"name":"COCA-COLA 12 OZ 30 PK CANS?","idproduct":25,"defaultimg":"http://makglobal.com/images/coca_cola_usa/4900002615.jpg"}]}

sanneterpstra commented 7 years ago

I had the exact same problem. Switched to using Bloodhound 0.10.5 and now it works.