Javascript jQuery自动完成变量范围

Javascript jQuery自动完成变量范围,javascript,jquery,variables,scope,Javascript,Jquery,Variables,Scope,我对这个函数中变量的范围有问题。基本上,当用户关注将有jQuery下拉列表的textbox时,我希望将旧值保存在textbox中(如果存在),以便在需要时恢复它。我还尝试在函数外部声明previous,并将其作为窗口。previous但没有成功。问题是,当我从下拉列表函数中使用previous变量时,我总是将其返回为未定义的 // Delete option allows a user to delete the value directly from the textbox associate

我对这个函数中变量的范围有问题。基本上,当用户关注将有jQuery下拉列表的textbox时,我希望将旧值保存在textbox中(如果存在),以便在需要时恢复它。我还尝试在函数外部声明
previous
,并将其作为
窗口。previous
但没有成功。问题是,当我从
下拉列表
函数中使用
previous
变量时,我总是将其返回为
未定义的

// 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", "");
    })
}

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

这意味着,当您在文本框中单击时,仅当您选择一个结果时,功能焦点才会启动

要获得之前的信息,最好的解决方案是:

$(your element).click(function() {
   previous = $(this).val()
}
这来自jQueryUi Autocomplete的文档:

焦点(事件、用户界面)

焦点移动到项目时触发(未选择)。默认操作是将文本字段的值替换为焦点项目的值,但前提是事件是由键盘交互触发的。 取消此事件会阻止更新值,但不会阻止聚焦菜单项。


您甚至还没有描述问题是什么您可以添加一个JSFIDLE吗?