jQuery自动完成变量范围

Question

我在这个函数中的变量范围有问题。基本上，当用户专注于一个将有jQuery下拉列表的文本框时，我想将旧值保存在文本框中（如果存在以便在需要时恢复它）。我也试图在功能之外声明previous，并且试图声明window.previous但没有成功。问题是，当我使用previous变量从.dropdown函数中，我总是把它找回来为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的自动完成功能的文档：

焦点（事件，UI）

触发时焦点移动到一个项目（不选择）。默认操作是将文本字段的值替换为焦点项目的值，但只有在事件是由键盘交互触发的情况下。 取消此事件可防止更新该值，但不会阻止菜单项被聚焦。

focus documentation