動態表單字段自動完成

我正在研究一個具有'TemoinsVille'文本框輸入的asp.net web表單。該字段jquery的自動完成功能：當我只有一個TemoinsVille輸入字段動態表單字段自動完成

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是字符串列表：

 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字段，但是自動完成只適用於第一個，並且該值不綁定到模型..任何建議？

來源

2016-11-21 Melodie Gauthier

首先請從您的視圖中刪除<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); 
       } 
      }); 
     }); 
    });

希望上述建議可以幫助你解決你的問題

來源

2016-11-22 05:10:47

動態表單字段自動完成

回答

相關問題