Dynamische Formularfeld zum automatischen Vervollständigung

Question

ich auf einer asp.net Webformular arbeitete, die einen ‚TemoinsVille‘ Textbox Eingang hat. Dieses Feld hat jquery Funktion zur automatischen Vervollständigung:

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"); 
    }; 

Diese Funktion zur automatischen Vervollständigung funktioniert gut, wenn ich nur ein TemoinsVille Eingabefeld haben.

Ich möchte der Benutzer dynamisch zu können, fügen Sie mehr ‚TemoinsVille‘, in meinem Modell (InfoFormulaireADTModele.cs), TemoinsVille ist eine Liste von string: die

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

Ich habe den folgenden Code zu lassen Benutzer mehr TemoinsVille hinzufügen:

$(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; 
     }); 
    }); 

Und meiner Ansicht nach der TemoinsVille Teil sieht wie folgt aus:

@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> 

Mit diesem Code, der die automatische Vervollständigung funktioniert, aber ich kann nicht andere VilleTemoins Felder hinzufügen. Ich nehme an, das Formular-Tag ein des Problems ist. Aber wenn ich es entfernen, die die automatische Vervollständigung nicht mehr funktioniert und ich kann immer noch nicht einen anderen TemoinsVille hinzufügen.

Wenn ich den Code außerhalb der @ using Html.BeginForm()), kann ich dann mehr TemoinsVille Felder hinzufügen, aber die automatische Vervollständigung funktioniert nur auf der ersten und der Wert bindet nicht an die Modell .. Irgendwelche Vorschläge?

Answer 1

Zuerst entfernen Sie bitte <form role="form" autocomplete="off"> aus Ihrer Ansicht, weil @using (Html.BeginForm()) bereits ein Formular-Tag ist, also ist es gute Praxis, verschachtelte Tags nicht zu verwenden.

Um Feld in der automatischen Vervollständigung Liste

-Controller hinzufügen

[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. 


    } 

In JavaScript-Aufruf Methode AddNewField machen

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

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

Hoffnung oben Vorschlag, den Sie Ihr Problem

lösen helfen kann