Jump to content

QuickSearch Ajax com problemas no keydown quando o user escreve muito rápido


Recommended Posts

Boas a todos,
achei por bem partilhar esta alteração de código para a pesquisa livre no módulo csquicksearch para o prestashop.
Acontece que quando o utilizador escreve demasiado rápido os pedidos ajax atropelam-se, sendo que começa a comer letras à palavra pesquisada.

Segue a função $ajaxsearch modificada que espero resolver problemas idênticos:
/modules/csquicksearch/blocksearch-instantsearch.tpl

{if $ajaxsearch}
    <script type="text/javascript">
    // <![CDATA[
    
        var typingTimer;                //timer identifier
        var doneTypingInterval = 500;  //time in ms for delay
        var $input = $('#csquicksearch');
               
        //on keyup, start the countdown
        $input.on('keyup', function () {
            clearTimeout(typingTimer);
            typingTimer = setTimeout(doneTyping, doneTypingInterval);
        });

        //on keydown, clear the countdown
        $input.on('keydown', function () {
            clearTimeout(typingTimer);
        });

        //user is "finished typing," do something
        function doneTyping () {
              //do something
              if($input.val().length >= {$nbLeast}){
                //stopInstantSearchQueries();
                instantSearchQuery = $.ajax({
                    url: '{$csquicksearch_path}',
                    data: {
                        ajaxSearch: 1,
                        id_lang: {$cookie->id_lang},
                        q: $input.val()
                    },
                    delay : 700,
                    dataType: 'html',
                    type: 'POST',
                    success: function(data){
                        if($("#csquicksearch").val().length >=  {$nbLeast})
                        {
                            $('#show_result').html(data);
                            ajaxCart.refresh();
                        }
                        
                    }
                }).then(function(results){
                    $("ul.thumb_list").carouFredSel({
                        auto: false,
                        responsive: true,
                        width: '100%',
                        height : 'variable',
                        prev: '#prev_quicksearch',
                        next: '#next_quicksearch',
                        swipe: {
                            onTouch : true
                        },
                        items: {
                            width: 90,
                            height : 105,
                            visible: {
                                min: 1,
                                max: {$nb}
                            }
                        },
                        scroll: {
                            items : 1 ,       //  The number of items scrolled.
                            direction : 'left'
                        }

                    });
                });
            }
            else if ($input.val().length == 0)
                $('div.result').remove();
            else
            {
                text = "{l s='Number of characters at least are ' mod='csquicksearch'} {$nbLeast}";
                html = '<div class="result">' + text + '</div>';
                $('div#show_result').html(html);
            }
        }        
        
    // ]]>
    </script>
{/if}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...