Jquery 设置自动完成opencart的最小长度

Jquery 设置自动完成opencart的最小长度,jquery,autocomplete,opencart2.x,Jquery,Autocomplete,Opencart2.x,我正在使用opencart 2.0.2.0。他们提供了自动完成功能,但没有jQueryUI。我想为筛选数据设置minLength。我的代码是 $('input[name=\'search\']').autocomplete({ 'source': function(request, response) { $.ajax({ url: 'index.php?route=product/product/autocomplete&search='

我正在使用opencart 2.0.2.0。他们提供了自动完成功能,但没有jQueryUI。我想为筛选数据设置minLength。我的代码是

$('input[name=\'search\']').autocomplete({
    'source': function(request, response) {
        $.ajax({
            url: 'index.php?route=product/product/autocomplete&search=' +  encodeURIComponent(request),
            dataType: 'json',
            success: function(json) {
                response($.map(json, function(item) {
                    return {
                        label: item['name'],
                        value: item['product_id']
                    }
                }));
            }
        });
    },
    'minLength': 3,
    'select': function(item) {
        $('input[name=\'search\']').val(item['label']);
        $('#search_btn').click();
    }
});
opencart的自动完成功能是

(function($) {
$.fn.autocomplete = function(option) {
    return this.each(function() {
        this.timer = null;
        this.items = new Array();

        $.extend(this, option);

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

        // Focus
        $(this).on('focus', function() {
            this.request();
        });

        // Blur
        $(this).on('blur', function() {
            setTimeout(function(object) {
                object.hide();
            }, 200, this);              
        });

        // 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() {
            var pos = $(this).position();

            $(this).siblings('ul.dropdown-menu').css({
                top: pos.top + $(this).outerHeight(),
                left: pos.left
            });

            $(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) {
            html = '';

            if (json.length) {
                for (i = 0; i < json.length; i++) {
                    this.items[json[i]['value']] = json[i];
                }

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

                // Get all the ones with a categories
                var category = new Array();

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

                        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>');
        $(this).siblings('ul.dropdown-menu').delegate('a', 'click', $.proxy(this.click, this)); 

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

它只在字符限制匹配时第一次起作用,但在清除文本框后不起作用

将此代码段放在默认情况下的opencart autocomplete on keydown上; 这意味着如果按下时长度未达到3,则取消请求

if($(this)[0].value.length > 2)    
if ($(this)[0].value.length > 2 && k !=8 || $(this)[0].value.length > 2 && k !=46 )
                                {

                                    this.request();
                                }else if($(this)[0].value.length <= 2  && k ==8 || $(this)[0].value.length <= 2  && k ==46)
                                {

                                    this.hide();    
                                }else{

                                    this.request();
                                    }

转到common.js并将焦点函数替换为:

$this.onfocus,函数{ if option.minLength!==未定义{ 如果this.value.length>=option.minLength{ 这是我的请求; }否则{ 这个。隐藏; } }否则{ 这是我的请求; } }; 还有按键功能

$this.onkeydown,函数事件{ var k=event.keyCode; 开关k{ 案例27: 这个。隐藏; 打破 违约: if option.minLength!==未定义{ 如果this.value.length+k==8 | | k==46?-1:1>=option.minLength{ 这是我的请求; }否则{ 这个。隐藏; } }否则{ 这是我的请求; } 打破 } }; 最后,传递minLength参数,例如:

$'.js自动完成'.autocomplete'{ minLength:3,//您的号码在这里 来源:函数请求、响应{ ...
if($(this)[0].value.length > 2)    
if ($(this)[0].value.length > 2 && k !=8 || $(this)[0].value.length > 2 && k !=46 )
                                {

                                    this.request();
                                }else if($(this)[0].value.length <= 2  && k ==8 || $(this)[0].value.length <= 2  && k ==46)
                                {

                                    this.hide();    
                                }else{

                                    this.request();
                                    }