Bootstrap-3-Typeahead
Bootstrap-3-Typeahead copied to clipboard
Typeahead is not working at all
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"}]}
I had the exact same problem. Switched to using Bloodhound 0.10.5 and now it works.