<div class="search-container">
    <i class="ion-ios-search-strong"></i>
    <div class="search-content">
        <div class="container">
            <div id="search">
                <input type="text" name="search" value="{{ search }}" placeholder="{{ text_search }}" class="form-control input-lg"/>
                <button type="button" class="btn btn-default btn-lg"><i class="ion-ios-search-strong"></i></button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('.search-container > i').click(function () {
            $(".search-content").slideToggle();
            $(this).toggleClass("ion-ios-search-strong ion-android-close")
        });
    });
</script>
<script type="text/javascript">
    // Autocomplete */
    (function ($) {
        $.fn.Soautocomplete = function (option) {
            return this.each(function () {
                this.timer = null;
                this.items = [];

                $.extend(this, option);

                $(this).attr('autocomplete', 'off');

                // Focus
                $(this).on('focus', function () {
                    this.request();
                });
                // Keydown
                $(this).on('keydown', function (event) {
                    switch (event.keyCode) {
                        case 27: // escape
                            this.hide();
                            break;
                        default:
                            this.request();
                            break;
                    }
                });

                // Click
                this.click = function (event) {
                    event.preventDefault();
                    value = $(event.target).parent().attr('data-value');
                    if (value && this.items[value]) {
                        this.select(this.items[value]);
                    }
                };

                // Show
                this.show = function () {
                    $(this).siblings('ul.dropdown-menu').show();
                };

                // Hide
                this.hide = function () {
                    $(this).siblings('ul.dropdown-menu').hide();
                };

                // Request
                this.request = function () {
                    clearTimeout(this.timer);

                    this.timer = setTimeout(function (object) {
                        object.source($(object).val(), $.proxy(object.response, object));
                    }, 200, this);
                };

                // Response
                this.response = function (json) {
                    var html = '';
                    if (json.length) {
                        for (i = 0; i < json.length; i++) {
                            this.items[json[i]['value']] = json[i];
                        }

                        for (var i = 0; i < json.length; i++) {
                            if (!json[i]['category']) {
                                html += '<li class="col-xs-12 col-sm-6 col-md-4" data-value="' + json[i]['value'] + '" title="' + json[i]['label'] + '">';

                                if (json[i]['image'] && json[i]['show_image'] && json[i]['show_image'] == 1) {
                                    html += '	<a class="media-left" href="' + json[i]['link'] + '"><img class="pull-left" src="' + json[i]['image'] + '"></a>';
                                }

                                html += '<div class="media-body">';
                                //html += '<a href="' + json[i]['link'] + '" title="' + json[i]['label'] + '"><span>' + json[i]['cate_name'] + json[i]['label'] + '</span></a><br><br>';
                                html += '<a href="' + json[i]['link'] + '" title="' + json[i]['label'] + '"><span>' + json[i]['label'] + '</span></a><br><br>';

                                if (json[i]['price'] && json[i]['show_price'] && json[i]['show_price'] == 1) {
                                    html += '	<div class="box-price pull-left">';
                                    if (!json[i]['special']) {
                                        html += '<span class="price text-bold text-black">' + json[i]['price'] + '</span>';
                                    } else {
                                        html += '<span class="price-old" style="text-decoration:line-through;">' + json[i]['price'] + '</span><span class="price-new">' + json[i]['special'] + '</span>';
                                    }
                                    html += '</div>';
                                }
                                //html += '<div class="text-right pull-right">';
                                //html += '<button type="button" onclick="APP.cartAdd(' + json[i]['value'] + ', \'1\');" class="btn btn-white btn-xs text-black" data-toggle="tooltip" title="" data-original-title="Add to Cart"><i class="fa fa-shopping-basket" aria-hidden="true"></i></button>';
                                //html += '<button type="button" onclick="APP.whishList(' + json[i]['value'] + ');" class="btn btn-white btn-xs text-black" data-toggle="tooltip" title="" data-original-title="Add to Wish List"><i class="fa fa-heart"></i></button>';
                                //html += '<button type="button" onclick="APP.compare(' + json[i]['value'] + ');" class="btn btn-white btn-xs text-black" data-toggle="tooltip" title="" data-original-title="Add to Compare"><i class="fa fa-exchange"></i></button>';
                                //html += '</div>';
                                html += '</div></li>';
                                //html += '<li class="clearfix"></li>';
                            }
                        }

                        // Get all the ones with a categories
                        var category = [];

                        for (i = 0; i < json.length; i++) {
                            if (json[i]['category']) {
                                if (!category[json[i]['category']]) {
                                    category[json[i]['category']] = [];
                                    category[json[i]['category']]['name'] = json[i]['category'];
                                    category[json[i]['category']]['item'] = [];
                                }

                                category[json[i]['category']]['item'].push(json[i]);
                            }
                        }

                        for (i in category) {
                            html += '<li class="dropdown-header">' + category[i]['name'] + '</li>';

                            for (j = 0; j < category[i]['item'].length; j++) {
                                html += '<li data-value="' + category[i]['item'][j]['value'] + '"><a href="#">&nbsp;&nbsp;&nbsp;' + category[i]['item'][j]['label'] + '</a></li>';
                            }
                        }
                    }

                    if (html) {
                        this.show();
                    } else {
                        this.hide();
                    }

                    $(this).siblings('ul.dropdown-menu').html(html);
                };

                $(this).after('<ul class="dropdown-menu"></ul>');

            });
        }
    })(window.jQuery);

    $(document).ready(function () {
        var selector = '#search{{ module }}';
        var total = 0;
        var showimage = true;
        var showprice = true;
        var character = 1;
        var height = 100;
        var width = 100;
        var limit = 9;

        $(selector).find('input[name=\'search\']').Soautocomplete({
            delay: 500,
            source: function (request, response) {
                if (request.length >= character) {
                    $.ajax({
                        url: 'index.php?route=extension/module/so_searchpro/autocomplete&limit=' + limit + '&width=' + width + '&height=' + height + '&filter_name=' + encodeURIComponent(request),
                        dataType: 'json',
                        success: function (json) {
                            response($.map(json, function (item) {
                                total = 0;
                                if (item.total) {
                                    total = item.total;
                                }

                                return {
                                    price: item.price,
                                    special: item.special,
                                    tax: item.tax,
                                    label: item.name,
                                    cate_name: (item.category_name) ? item.category_name + ' > ' : '',
                                    image: item.image,
                                    link: item.link,
                                    minimum: item.minimum,
                                    show_price: showprice,
                                    show_image: showimage,
                                    value: item.product_id,
                                }
                            }));
                        }
                    });
                }
            },
        });
    });
</script>