Question

我正在开发一个带有'TemoinsVille'文本框输入的asp.net网络表单。该字段具有jquery自动完成功能：

 var auto5 = $('.temoins').autocomplete({
        source: '@Url.Action("AutocompleteTous", "InvForm")',
        minLength: 3,
        delay: 400
    }).data("ui-autocomplete");
    auto5._renderItem = function (ul, item) {
        return $("<li>")
            .attr("ui-autocomplete-item", item)
            .append(item.label.split("|")[0])
            .appendTo(ul);
    };
    auto5._renderMenu = function (ul, items) {
        var that = this;
        $.each(items, function (index, item) {
            that._renderItemData(ul, item);
        });
        $(ul).addClass("dropdown-menu");
    };

当我只有一个TemoinsVille输入字段时，此自动完成功能正常工作。

我希望用户能够在我的Model（InfoFormulaireADTModele.cs）中动态添加更多'TemoinsVille'，TemoinsVille是一个字符串列表：

        public List<String> TemoinsVille { get; set; }

我添加了以下代码，让用户添加更多TemoinsVille：

$(function () {
        $(document).on('click', '.btn-add', function (e) {
            e.preventDefault();

            var controlForm = $('.controls form:first'),
                currentEntry = $(this).parents('.entry:first'),
                newEntry = $(currentEntry.clone()).appendTo(controlForm);

            newEntry.find('input').val('');
            controlForm.find('.entry:not(:last) .btn-add')
                .removeClass('btn-add').addClass('btn-remove')
                .removeClass('btn-success').addClass('btn-danger')
                .html('<span class="glyphicon glyphicon-minus"></span>');
        }).on('click', '.btn-remove', function (e) {
            $(this).parents('.entry:first').remove();

            e.preventDefault();
            return false;
        });
    });

在我看来，TemoinsVille部分看起来像这样：

@using (Html.BeginForm())
{
//...other fields

<div class="container">
<div class="row">
    <div class="control-group" id="fields">
        <label class="control-label" for="field1">Témoins</label>
        <div class="controls">
            <form role="form" autocomplete="off">
                <div class="entry input-group col-xs-3">
                    @Html.TextBoxFor(x => x.AdtFormModel.TemoinsVille, new { Class = "temoins" })                        
                       <span class="input-group-btn">
                        <button class="btn btn-success btn-add" type="button">
                            <span class="glyphicon glyphicon-plus"></span>
                        </button>
                    </span>
                </div>
            </form>
        </div>
    </div>
</div>

使用此代码，自动完成功能正常，但我无法添加其他VilleTemoins字段。我认为表单标签是问题之一。但是，如果我将其删除，自动完成功能将停止工作，我仍然无法添加另一个TemoinsVille。

如果我把代码放在@using Html.BeginForm（）之外，那么我可以添加更多的TemoinsVille字段，但是自动完成仅适用于第一个，并且值不会绑定到模型..有什么建议吗？

Answer 1

首先，请从您的视图中移除<form role="form" autocomplete="off">，因为@using (Html.BeginForm())已经是表单标记，所以最好不要使用嵌套标记。

在自动填充列表中添加字段

控制器

  [HttpGet]
    public JsonResult AddNewField(string fieldName)
    {
        //Can make duplication check hear...
        TemoinsVille.Add(fieldName);

        //Hear make some database Or other means to persist data to store newly inserted field.
        //The reason we need to store field is that we won't be able to get this fieldname when you search same again in autocomplete.


    }

在JavaScript中调用AddNewField方法

$(function () {
        $(".btn-add").click(function () {

            $.ajax({
                type: "GET",
                url: "/Home/AddNewField?fieldName=" + $(".temoins").val(),
                success: function (data) {
                    console.log(data);
                }
            });
        });
    });

希望以上建议可以帮助您解决问题

动态表单字段自动完成

1 个答案: