jQuery自动完成变量范围

Question

我对此函数中的变量范围有疑问。基本上，当用户关注将具有 jQuery 下拉列表的文本框时，我想将旧值保存在文本框中（如果存在）以便在需要时恢复它。我还尝试在函数外部声明 previous 并声明为 window.previous 但没有成功。问题是，当我在 .dropdown 函数中使用 previous 变量时，我总是将其返回为 undefined

// Delete option allows a user to delete the value directly from the textbox associated with the dropdown.
// Otherwise he will be warned and always forced to make a choice.
// With value will add an extra value to a textbox that has _val apended to the current id
// Create new, if set will open a new confirmation to add the item to the dropdown list
function acomplete(element, source, deleteoption, withvalue, createnew, createtable, createcolumn, retid) {
    var previous;
    // Add arrow as this is a dropdown
    $(element).addClass("dropdown");
    $(element).autocomplete({
        source: source,
        minLength: 0,
        global: false,
        select: function (event, ui) {
            if (withvalue == true) {
                $("#" + $(this).attr("id") + "_val").val(ui.item.thevalue);
                //$("#" + $(this).attr("id") + "_val").trigger("change");
            }
            // Update hidden on select option
            $("#" + $(this).attr("id") + "_id").val(ui.item.id);
            // For items that have change event bound trigger ot so we are updating data in table.
            $("#" + $(this).attr("id") + "_id").trigger("change");
        },
        focus: function (event, ui) {
            // Save old value for backup
            previous = this.value;
        },
        change: function (event, ui) {
            //alert($(this).val());
            if (!ui.item && $(this).val().length > 0) { // Item not selected in the dropdown list
                $.ajax({
                    url: "ajax/check_dropdown_item_exists.php",
                    global: false,
                    method: "POST",
                    data: {
                        table: createtable,
                        colnames: createcolumn,
                        colvals: encodeURI(String($(this).val().toUpperCase())),
                    },
                    success: function (data) {
                        if (data != "TRUE") {
                            // Ask confirm to add new item to table
                            $.confirm('ITEM DOES NOT EXIST! ADD TO LIST?', function (answer) {
                                if (answer) {
                                    $.ajax({
                                        url: "inc/insert_table_field.php",
                                        global: false,
                                        method:"POST",
                                        data: {
                                            table: createtable,
                                            colnames: createcolumn,
                                            colvals: String($(this).val().toUpperCase()),
                                            retid: retid,
                                        },
                                        success: function (data) {
                                            if ($.isNumeric(data)) {
                                                $("#" + $(element).attr("id") + "_id").val(data);
                                                // Set the newly created value in dropdown
                                                //$(element).val(String($(element).val().toUpperCase()));
                                                // And update DB
                                                $("#" + $(element).attr("id") + "_id").trigger("change");
                                            } else {
                                                $.alert(data);
                                            }
                                        },
                                        error: function () {
                                            $.alert('ERROR CREATING THE NEW ITEM!');
                                        }
                                    })
                                } else {
                                    alert(previous)
                                    // NO so blank
                                    $(this).val(previous).focus();
                                }
                            })
                        } else {
                            // Commit change with value that already exists
                            // fecth item id and trigger select event
                            $.ajax({
                                url: "ajax/get_dropdown_item_id.php",
                                global: false,
                                method: "POST",
                                data: {
                                    table: createtable,
                                    colnames: createcolumn,
                                    colvals: String($(element).val().toUpperCase()),
                                    retid: retid,
                                },
                                success: function (data) {
                                    if ($.isNumeric(data)) {
                                        $("#" + $(element).attr("id") + "_id").val(data);
                                        $("#" + $(element).attr("id") + "_id").trigger("change");
                                    }
                                }
                            })
                        }
                    }
                })
            } else {
                $(this).val((ui.item ? ui.item.label : "")); // If empty put back the last one
                if (!ui.item) {
                    if (deleteoption !== true) {
                        this.value = "";
                        $.alert('YOU CAN SELECT FROM DROPDOWN ONLY!');
                        $(element).val(element.oldvalue).focus();
                    } else {
                        $("#" + $(this).attr("id") + "_id").val("");
                        $("#" + $(this).attr("id") + "_id").trigger("change");
                    }
                }
            }
        }
    }).dblclick(function () {
        $(this).autocomplete("search", "");
    }).click(function () {
        $(this).autocomplete("search", "");
    })
}

Answer 1

问题在于焦点不会对文本框/输入的焦点做出反应，而是自动完成的结果。

这意味着当您单击文本框时，仅当您选择结果时，功能焦点才会启动。

你最好的解决办法是：

$(your element).click(function() {
   previous = $(this).val()
}

这是来自 jQueryUi Autocomplete 的文档：

焦点（事件，用户界面）

当焦点移动到一个项目（不是选择）时触发。默认操作是将文本字段的值替换为焦点项的值，但前提是事件由键盘交互触发。 取消此事件会阻止更新值，但不会阻止菜单项获得焦点。

focus documentation