jquery ui自动完成多个"响应"方法

时间:2015-08-28 12:16:56

标签: javascript jquery jquery-ui autocomplete

让我们看看我能否解释一下......我有一个功能可以为我的自动填充设置常用选项(minLength,delay,close,response ...)。 但是我的一个自动填充功能需要在响应方法上做一些额外的工作。如何执行"原始的通用响应功能"额外的工作? 是否可以不扩展小部件?

function attachAutocomplete_Common(arControlIds) {
    $.each(arControlIds, function (i, control) {
        $("#" + control).autocomplete({
            minLength: 3,
            delay: 800,
            autoFocus: true,
            focus: function (event, ui) {
                $(this).val(ui.item.label);
                return false;
            },
            response: function (event, ui) {
                if (ui.content != null && ui.content.length === 1) {
                    $(this).data("ui-autocomplete").term = null;
                    $(this).data("ui-autocomplete")._trigger("select", "autocompleteselect", { item: ui.content[0] });
                    $(this).autocomplete("close");
                }
            }
        });
    });
}

$(document).ready(function () {
    attachAutocomplete_Common(["cmbCountry", "cmbCity", "cmZipCode"]);

    $("#cmZipCode").autocomplete({
        response: function (event, ui) {
            [execute common response function];
            doSomeExtraWork();
        }
    });
}); 

2 个答案:

答案 0 :(得分:1)

将公共代码放在窗口小部件之外的自己的函数中。然后从两个位置调用它 - 来自response内的attachAutocomplete_Common和来自#cmZipCode的内容:

var commonResponse = function (event, ui) {
    if (ui.content != null && ui.content.length === 1) {
        $(this).data("ui-autocomplete").term = null;
        $(this).data("ui-autocomplete")._trigger("select", "autocompleteselect", { item: ui.content[0] });
        $(this).autocomplete("close");
    }
};

function attachAutocomplete_Common(arControlIds) {
    $.each(arControlIds, function (i, control) {
        $("#" + control).autocomplete({
                // ommitted, see above
            },
            response: commonResponse.bind(this)
        });
    });
}

$(document).ready(function () {
    attachAutocomplete_Common(["cmbCountry", "cmbCity", "cmZipCode"]);

    $("#cmZipCode").autocomplete({
        response: function (event, ui) {
            commonResponse.bind(this)(event, ui);
            doSomeExtraWork();
        }
    });
});

编辑:范围问题:要么像在另一个答案中,要么通过绑定。我已经更新了代码。我还没有尝试过如何在each循环中绑定函数就足够了。

答案 1 :(得分:0)

根据Risadinha的回答我做了它的工作。尝试访问"这是一个错误"内部" commonResponse"功能。这是工作代码。

var commonResponse = function (event, ui, $ctl) {
    if (ui.content != null && ui.content.length === 1) {
        var $self = $ctl || $(this);

        $self.data("ui-autocomplete").term = null;
        $self.data("ui-autocomplete")._trigger("select", "autocompleteselect", { item: ui.content[0] });
        $self.autocomplete("close");
    }
};

function attachAutocomplete_Common(arControlIds) {
    $.each(arControlIds, function (i, control) {
        $("#" + control).autocomplete({
                // ommitted, see above
            },
            response: commonResponse
        });
    });
}

$(document).ready(function () {
    attachAutocomplete_Common(["cmbCountry", "cmbCity", "cmbZipCode"]);

    $("#cmbZipCode").autocomplete({
        response: function (event, ui) {
            commonResponse(event, ui, $(this));
            doSomeExtraWork();
        }
    });
});