function WasteCreate(o){ var defaults = { 'selector_product' : '#wastecreateform-productidentifier', 'url_product_find' : 'product/find', "products" : [] }; var product = null; init(); function init(){ defaults = $.extend(defaults,o); addPreventEnterToProduct(); initAutocomplete(); } function addPreventEnterToProduct(){ doPreventSubmit($(defaults.selector_product)); } function initAutocomplete(){ // var colors = ["red", "blue", "green", "yellow", "brown", "black"]; // $('#product_search').typeahead( {source: colors } ); var $input = $(defaults.selector_product); console.info("len:" + $input.length); console.info('products: ' + defaults.products.length); $input.typeahead({source : defaults.products, autoSelect: true, items: 20, minLength: 3, // displayText: function (item){ // return item.text; // } }); $input.change(function() { var current = $input.typeahead("getActive"); $("#filter_text").val(''); if (current) { // Some item from your model is active! if (current.name == $input.val()) { // This means the exact match is found. Use toLowerCase() if you want case insensitive match. // console.info(current); _findProduct(current.id_product); } else { // This means it is only a partial match, you can either add a new item // or take the active if you don't want new items // console.info('partial'); product = null; updateTableProduct(); } } else { // Nothing is active so it is a new value (or maybe empty value) // console.info('incactive'); product = null; updateTableProduct(); } }); } function _findProduct(id){ var data, url; url = defaults.url_product_find; data = { 'id' : id, }; $.ajax({ dataType: "json", url: url, data: data, success: onFindProductReady }); } function clearTableProduct(){ $('.product-name').html(''); $('.product-stock').html(''); $('.product-category').html(''); $('#wastecreateform-id_product').val(''); } function fillTableProduct(){ $('.product-name').html(product.name); $('.product-stock').html(product.stock); $('.product-category').html(product.category); $('#wastecreateform-id_product').val(product.id_product); } function updateTableProduct(){ clearTableProduct(); fillTableProduct(); } function onFindProductReady(json){ product = json.product; fillTableProduct(); } }