验证Javascript自动完成

时间:2019-02-26 21:23:22

标签: javascript jquery asp.net asp.net-mvc model-view-controller

我有一个网页,其中包含两个利用Javascript自动完成功能的TextBoxFor字段。使用ClientUser字段之一,响应包括整数和字符串。然后将该整数与页面上的另一个整数字段ClientID进行比较,如果匹配,则在自动完成建议中使用该字符串。另一个字段的响应WorkmateUser是在自动完成功能中立即可用的字符串列表。

正在命中控制器并返回正确的总计列表,然后选择了正确的需要验证的URL /字段,但是未定义需要验证的ClientUser自动完成字段的需要验证的列表。将页面上的整数字段与为自动完成列表返回的整数进行比较的最有效方法是什么?预先感谢!

剃刀:

<div class="row">
    <div class="col-lg-12">
        @Html.LabelFor(m => m.WorkmateUser, "Workmate To Add", new { @class = "control-label" })
        @Html.TextBoxFor(m => m.WorkmateUser, new { data_autocomplete_url = Url.Action("GetWorkmates"), @class = "form-control" })
    </div>
</div>
<div class="row">
    <div class="col-lg-8">
        @Html.LabelFor(m => m.ClientID, "Firm To Include", "--Choose Firm--")
        @Html.DropDownListFor(m => m.ClientID, StaticCache.GetClients(Model.UserID), new { @class = "form-control" })
    </div>
</div>
<div class="row">
    <div class="col-lg-8">
        @Html.LabelFor(m => m.ClientUser, "Client To Add", new { @class = "control-label" })
        @Html.TextBoxFor(m => m.ClientUser, new { data_autocomplete_url = Url.Action("GetAllClients"), @class = "form-control" })
    </div>
</div>

Javascript:

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $('*[data-autocomplete-url]')
            .each(function () {
                var $url = $(this);
                $(this).autocomplete({
                    source: $(this).data("autocomplete-url"),
                    response: function (data) {
                        if ($(this).data("autocomplete-url") == "/Message/GetAllClients") {
                            var aList = [];
                            for (var i = 0; i < data.length; i++) {//data.length is undefined!!!
                                if (data[i].ClientID == $("#ClientID").val()) {
                                    aList.push(data[i].FirstName);
                                }
                            }
                            return bros;
                        }
                        else {
                            return data;
                        }
                    }
                });
            });
    });
</script>

1 个答案:

答案 0 :(得分:0)

这可能不是最优雅的解决方案,但是我最终将需要验证的自动完成调用分离到了自己的脚本中,并将其他变量传递到控制器中以在后端进行验证。以下作品:

脚本:

<script>
    $(document).on('keyup', '#ClientUser', function () {
        var abID = $(this),
            cID = $("#ClientID").val(),
            cList = [];
        $.ajax({
            type: "GET",
            url: '@Url.Action("GetAllClients", "Message")',
            data: { term: abID.val(), clientID: cID },
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    cList.push(data[i]);
                }
            },
            error: function () {
                alert("Client employeess could not be pulled.");
            }
        });
        abID.autocomplete({
            source: cList
        });
    });
</script>