Comment combiner plusieurs événements dans une saisie semi-automatique jQuery UI?

Question

Dans le code ci-dessous, j'ai la même fonction sur trois événements différents (focus, select, change). Cela semble redondant mais je n'arrive pas à comprendre comment combiner les trois en un. Merci d'avance pour vos idées!

$("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

Vous pouvez déclarer une fois que la fonction du nom, comme celui-ci:

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

référence ensuite cette fonction au lieu d'un anonyme, comme ceci:

$("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

Créer une fonction distincte et indiquer que:

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

Effectuez la fonction named function, puis reportez-vous à celle-ci ci-dessous:

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