如何在jQuery UI自動完成中組合多個事件？

Question

在下面的代碼中，我對三個不同的事件（焦點，選擇，更改）具有相同的功能。這似乎是多餘的，但我無法弄清楚如何將三者結合爲一體。提前感謝您的任何想法！

$("input[name^='addSchool']").autocomplete({ 
    source: function (request, response) { 
     var temp = $("input[name^='addSchool']").attr("name"); 
     var tempteacherID = temp.split(":"); 
     var teacherID; 
     teacherID = tempteacherID[1] 
     $.ajax({ 
      url: "JSONschools.asp", 
      dataType: "json", 
      data: { term: request.term, teacherID: teacherID }, 
      success: function (data) { 
       response(data); 
      } 
     }); 
    }, 
    focus: function (event, ui) { 
     //if the value of the textbox does not match a suggestion, clear its value 
     if (!ui.item) { 
      $(this).val(''); 
      $(this).parent("li").next().html("Please select only from the list shown").effect("pulsate", { times: 3 }, "slow"); 
     } 
     else { 
      $(this).next().val(ui.item.id); 
     } 
    }, 
    select: function (event, ui) { 
     //if the value of the textbox does not match a suggestion, clear its value 
     if (!ui.item) { 
      $(this).val(''); 
      $(this).parent("li").next().html("Please select only from the list shown").effect("pulsate", { times: 3 }, "slow"); 
     } 
     else { 
      $(this).next().val(ui.item.id); 
     } 
    }, 
    change: function (event, ui) { 
     //if the value of the textbox does not match a suggestion, clear its value 
     if (!ui.item) { 
      $(this).val(''); 
      $(this).parent("li").next().html("Please select only from the list shown").effect("pulsate", { times: 3 }, "slow"); 
     } 
     else { 
      $(this).next().val(ui.item.id); 
     } 
    }, 
    minLength: 2 
}); 

Answer 1

您可以一次將它聲明爲命名的功能，就像這樣：

function CheckSuggestion(event, ui) { 
    //if the value of the textbox does not match a suggestion, clear its value 
    if (!ui.item) { 
     $(this).val(''); 
     $(this).parent("li").next().html("Please select only from the list shown") 
          .effect("pulsate", { times: 3 }, "slow"); 
    } 
    else { 
     $(this).next().val(ui.item.id); 
    } 
} 

然後引用函數，而不是匿名之一，像這樣：

$("input[name^='addSchool']").autocomplete({ 
    source: function (request, response) { 
     var temp = $("input[name^='addSchool']").attr("name"); 
     var tempteacherID = temp.split(":"); 
     var teacherID; 
     teacherID = tempteacherID[1] 
     $.ajax({ 
      url: "JSONschools.asp", 
      dataType: "json", 
      data: { term: request.term, teacherID: teacherID }, 
      success: function (data) { 
       response(data); 
      } 
     }); 
    }, 
    focus: CheckSuggestion, 
    select: CheckSuggestion, 
    change: CheckSuggestion, 
    minLength: 2 
}); 

Answer 2

創建一個單獨的函數並提及：

function SelectFocusChange(event, ui) { 
     //if the value of the textbox does not match a suggestion, clear its value 
     if (!ui.item) { 
      $(this).val(''); 
      $(this).parent("li").next().html("Please select only from the list shown").effect("pulsate", { times: 3 }, "slow"); 
     } 
     else { 
      $(this).next().val(ui.item.id); 
     } 
} 



$("input[name^='addSchool']").autocomplete({ 
    source: function (request, response) { 
     var temp = $("input[name^='addSchool']").attr("name"); 
     var tempteacherID = temp.split(":"); 
     var teacherID; 
     teacherID = tempteacherID[1] 
     $.ajax({ 
      url: "JSONschools.asp", 
      dataType: "json", 
      data: { term: request.term, teacherID: teacherID }, 
      success: function (data) { 
       response(data); 
      } 
     }); 
    }, 
    focus: SelectFocusChange, 
    select: SelectFocusChange, 
    change: SelectFocusChange, 
    minLength: 2 
}); 

Answer 3

使功能成爲named function然後參考下面：

function valueChanged(event, ui){ 
      //if the value of the textbox does not match a suggestion, clear its value 
      if (!ui.item) { 
       $(this).val(''); 
       $(this).parent("li").next().html("Please select only from the list shown").effect("pulsate", { times: 3 }, "slow"); 
      } 
      else { 
       $(this).next().val(ui.item.id); 
      } 
     } 


$("input[name^='addSchool']").autocomplete({ 
    source: function (request, response) { 
     var temp = $("input[name^='addSchool']").attr("name"); 
     var tempteacherID = temp.split(":"); 
     var teacherID; 
     teacherID = tempteacherID[1] 
     $.ajax({ 
      url: "JSONschools.asp", 
      dataType: "json", 
      data: { term: request.term, teacherID: teacherID }, 
      success: function (data) { 
       response(data); 
      } 
     }); 
    }, 
    focus: valueChanged, 
    select: valueChanged, 
    change: valueChanged, 
    minLength: 2 
});