Question

我使用的是opencart 2.0.2.0。他们提供自动完成功能，但不提供jquery ui。我想为过滤数据设置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);

我如何为此设置minLength。

我试过了

$('input[name=\'search\']').on('keyup keydown', function(e) {
if($('input[name=\'search\']').val().trim().length > 3){
  $('input[name=\'search\']').autocomplete({
    code here
  });
 }
});

仅在字符限制匹配时首次使用，但在清除文本框后不再使用

Answer 1

将此片段放在默认情况下keydown上的opencart autocomplete; 这意味着如果按下它的长度没有达到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();
                                    }

Answer 2

转到 common.js 并将您的焦点功能替换为：

$(this).on("focus", function () {
    if (option.minLength !== undefined) {
        if (this.value.length >= option.minLength) {
            this.request();
        } else {
            this.hide();
        }
    } else {
        this.request();
    }
});

还有按键功能

$(this).on("keydown", function (event) {
    var k = event.keyCode;
    switch (k) {
        case 27:
            this.hide();
            break;
        default:
            if (option.minLength !== undefined) {
                if (this.value.length + ((k === 8 || k === 46) ? -1 : 1) >= option.minLength) {
                    this.request();
                } else {
                    this.hide();
                }
            } else {
                this.request();
            }
            break;
    }
});

最后传入minLength参数，例子：

$('.js-autocomplete').autocomplete({
    minLength: 3, // YOUR NUMBER HERE
    source: function (request, response) {
    ...

将minLength设置为自动完成opencart

2 个答案: