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 
});