0

我在使用 mvc3 开发的网站中使用了 jquery ui。I used jquery ui auto-complete mechanism.

我使用了以下 jquery 函数-

/// script to load owner for owner dropdown.
$(function () {
    $("#Owner_FullName").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/Employee/AutocompleteSuggestions",
                type: "POST",
                dataType: "json",
                data:
                    {
                        term: request.term
                    },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item.FullName, value: item.Id }
                    }
                    ))
                }
            })
        },
        minLength: 1,
        focus: function (event, ui) {
            $("#Owner_FullName").val(ui.item.label);
            return false;
        },
        select: function (event, ui) {
            if (ui.item) {
                $("#Owner_FullName").css('border', '');
                $("#Owner_FullName").val(ui.item.label);
                $("#OwnerId").val(ui.item.value);
                return false;
            }
        },
        change: function (event, ui) {
            if (ui.item == null) {
                $("#Owner_FullName").css({ 'border': '1px solid #ff0000' });
                $("#OwnerId").val(null);
            }
        }
    });
});

我在文本框中显示了所有者名称，并将 OwnerId 设置为隐藏字段以进行进一步处理。

对于用户在文本框中输入而不是从下拉列表中选择项目的处理情况，我使用了更改事件，并且在该事件中，我使用了将隐藏字段重置为 null 并将 css 应用于文本框。

现在我的问题是我的文本框字段不是必填字段，如果用户在文本框中键入并简单地提交数据，那么它应该显示警告类型的消息，并且在用户清除文本框值之前不应该发生提交过程。

如何处理？

4

1 回答 1

0

如果您想在用户只是在自动完成框中键入一个值而没有从下拉列表中选择时显示错误情况，您可以使用change自动完成事件来突出显示这一点并更新您的隐藏字段。

change: function (event, ui) {
  if (ui.item == null || ui.item == undefined) {//I also use the undefined check
    $("#OwnerId").val("");//I have never used null before when using val(). But you always want to clear out the hidden field if the user does not select from the drop down.
      if ($.trim($("#Owner_FullName").val()) == "") {//check and see if the user cleared the field out
        $("#Owner_FullName").css({ 'border': '' });
        //The autocomplete field is blank. Then put code here that allows the submit.
        }
          else
       {
          $("#Owner_FullName").css({ 'border': '1px solid #ff0000' });
          //The autocomplete field is NOT blank. Then put code here that prevents the submit.
       }//close the if = "" statement
    }
  }//close function

另一种选择可能是检查提交时的自动完成字段以查看是否选择了某些内容，如果未选择某些内容，则停止发布。您可以检查自动完成是否从列表中选择了某些内容...

$("#Owner_FullName").data("autocomplete").selectedItem != null //or undefined for that matter

让我知道这些是否适合您！

于 2012-09-21T11:18:28.887 回答