动态表单字段自动完成答案

【问题标题】：Dynamic form field autocomplete动态表单字段自动完成
【发布时间】：2016-11-21 21:36:39
【问题描述】：

我正在开发一个带有“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 输入字段时，此自动完成功能可以正常工作。

我希望用户能够在我的模型（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 字段，但自动完成仅适用于第一个字段，并且值不会绑定到模型.. 有什么建议吗？

【问题讨论】：

标签： javascript c# jquery asp.net-mvc razor

【解决方案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);
                }
            });
        });
    });

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

【讨论】：