mardi 14 juin 2016

jQuery autocomplete and jQuery mCustomScrollbar not displaying properly

I am using the Devbridge jQuery AutoComplete [link] alongside with the jQuery Custom Scrollbar script [link].

I have the autocomplete script working perfectly, however am now trying to incorporate the jQuery Custom Scrollbars script in the autocomplete search results.

Here is my jQuery

jQuery(document).ready(function($){

$('.dropdown .dropdown-menu').on({
    "click":function(e){
      e.stopPropagation();
    }
});

var el = $('.wcus_search_term'),
    def_loader = ( typeof woocommerce_params != 'undefined' && typeof woocommerce_params.ajax_loader_url != 'undefined' ) ? woocommerce_params.ajax_loader_url : woo_ultimate_search_config.search_icon,
    loader_icon = woo_ultimate_search_config.search_icon == '' ? def_loader : woo_ultimate_search_config.search_icon,
    search_button = $('.wcus_search_button'),
    min_chars = woo_ultimate_search_config.min_chars;

search_button.on('click', function(){
   var form = $(this).closest('form');
   if( form.find('.wcus_search_term').val()==''){
       return false;
   }
    return true;
});

el.each( function(){
    var $t = $(this),
        $form = $t.closest('form'),
        have_results = false,
        search_categories = $form.find('.wcus_search_categories'),
        post_type = $form.find('.wcus_post_type'),
        lang = ( $form.find('[name="lang"]').length > 0 ) ?  $form.find('[name="lang"]').val() : '',
        append_to  = ( typeof $t.data('append-to') == 'undefined') ? $t.closest('.wcus_wrapper') : $t.closest($t.data('append-to')),
        dropdown_width  = ( typeof $t.data('results-width') == 'auto') ? 'auto' : $t.data('results-width'),
        defer_request_by = woo_ultimate_search_config.ajax_delay == '' ? 0 : woo_ultimate_search_config.ajax_delay;

        $t.wcusautocomplete({
            minChars: min_chars,
            maxHeight: 150,
            appendTo: append_to,
            deferRequestBy: defer_request_by,
            width: dropdown_width,
            zIndex: 1,
            triggerSelectOnValidInput: false,
            serviceUrl: woo_ultimate_search_config.ajax_url + '&post_type=' + post_type.val()+ '&lang='+ lang,
            onSearchStart: function () {
                $t.css({'background-image': 'url(' + loader_icon + ')','background-repeat': 'no-repeat', 'background-position': 'center right'});
            },

            onSearchComplete: function () {
                $t.css('background-image', 'none');
                $(window).trigger('resize');
                $t.trigger('focus');

                $(".wcus-autocomplete-suggestions").mCustomScrollbar({
                    theme:"dark",
                    scrollButtons:{
                      enable:true
                    }
                });
            },

            onSelect: function(suggestion){
                if(suggestion.id != -1){
                    window.location.href = suggestion.url;
                }
            },

            beforeRender: function (){
                if(woo_ultimate_search_config.display_full_search_bar == 'true' && have_results ){
                    var params = {s: $t.val(), post_type: $form.find('.wcus_post_type').val()};
                    if ($form.find('.wcus_search_categories').length > 0) {
                        params['product_cat'] = $form.find('.wcus_search_categories').val();
                    }
                    var action = $form.attr('action');
                    var separator = action.indexOf('?') !== -1 ? "&" : "?";
                    var url = action + separator + $.param(params);
                    var div_result = '<div class="link-result"><a href="' + url + '">' + woo_ultimate_search_config.full_search_text + '</a></div>';
                    $t.find('.wcus-autocomplete-suggestions').append(div_result);
                }

            },

            transformResult: function (response) {
                response = typeof response === 'string' ? $.parseJSON(response) : response;
                have_results = response.results;
                return response ;
            },

            formatResult: function (suggestion, currentValue) {
                var pattern = '(' + $.WCUSAutocomplete.utils.escapeRegExChars(currentValue) + ')';
                var html = '';
                if(typeof suggestion.img !== 'undefined'){
                    html += suggestion.img;
                }

                html += '<div class="wcus_result_content"><div class="title">';
                html += suggestion.value.replace(new RegExp(pattern, 'gi'), '<strong>$1</strong>');
                html += '</div>';

                if(typeof suggestion.product_categories !== 'undefined'){
                    html += ' ' +  suggestion.product_categories;
                }

                if(typeof suggestion.div_badge_open !== 'undefined'){
                    html += suggestion.div_badge_open;
                }

                if(typeof suggestion.on_sale !== 'undefined'){
                    html += suggestion.on_sale;
                }

                if(typeof suggestion.outofstock !== 'undefined'){
                    html += suggestion.outofstock;
                }

                if(typeof suggestion.featured !== 'undefined'){
                    html += suggestion.featured;
                }

                if(typeof suggestion.div_badge_close !== 'undefined'){
                    html += suggestion.div_badge_close;
                }

                if(typeof suggestion.price !== 'undefined' && suggestion.price != ''){
                    html += ' ' + woo_ultimate_search_config.price_text  + ' ' + suggestion.price;
                }

                if(typeof suggestion.excerpt !== 'undefined'){
                    html += ' ' +  suggestion.excerpt.replace(new RegExp(pattern, 'gi'), '<strong>$1</strong>');
                }

                html += '</div>';

                return html;
            }
        });
});

});

If you look through the code you will see that I have attached the jQuery Custom Scrollbar code to the "OnSearchComplete" function of the script.

onSearchComplete: function () {
                $t.css('background-image', 'none');
                $(window).trigger('resize');
                $t.trigger('focus');

                $(".wcus-autocomplete-suggestions").mCustomScrollbar({
                    theme:"dark",
                    scrollButtons:{
                      enable:true
                    }
                });
            },

My issue is that the Custom Scrollbar script renders properly on the first autocomplete dropdown, however if you "onblur" or take focus away from the text box and then focus again on the text box the Custom Scrollbars or not displayed. You just see a normal scrollbar.

I have read through the available API methods for the Autocomplete script however there doesn't seem to be a method for "onblur" & "onFocus". I have tried adding the Custom Scrollbar code to other methods however this doesn't work.

Any help would be greatly appreciated

Aucun commentaire:

Enregistrer un commentaire