如何在jQuery UI自动完成中组合多个事件?

时间:2010-07-19 15:49:16

标签: jquery events jquery-ui autocomplete jquery-ui-autocomplete

在下面的代码中,我对三个不同的事件(焦点,选择,更改)具有相同的功能。这似乎是多余的,但我无法弄清楚如何将三者合二为一。提前感谢任何想法!

$("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
});

3 个答案:

答案 0 :(得分:3)

您可以将其声明为命名函数,如下所示:

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

答案 1 :(得分:1)

创建一个单独的函数并引用:

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

答案 2 :(得分:1)

将函数设为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
});