Der JS und HTML Code ist von hier übernommen: https://www.codexworld.com/autocomplete-textbox-multiple-values-jquery-php-mysql/ Erstmal die Vorlage ``` HTML <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> ``` ``` JS <script> $(function() { function split( val ) { return val.split( /,\s*/ ); } function extractLast( term ) { return split( term ).pop(); } $( "#skills" ).bind( "keydown", function( event ) { if ( event.keyCode === $.ui.keyCode.TAB && $( this ).autocomplete( "instance" ).menu.active ) { event.preventDefault(); } }) .autocomplete({ minLength: 1, source: function( request, response ) { // delegate back to autocomplete, but extract the last term // $.getJSON("skills.php", { term : extractLast( request.term )},response); //orginal .getJSON("/Blog/Tags", { term : extractLast( request.term )},response); //meine anpassung }, focus: function() { // prevent value inserted on focus return false; }, select: function( event, ui ) { var terms = split( this.value ); // remove the current input terms.pop(); // add the selected item terms.push( ui.item.value ); // add placeholder to get the comma-and-space at the end terms.push( "" ); this.value = terms.join( ", " ); return false; } }); }); </script> ``` Nun die Anpassungen Erstmal das Formular ``` C# @using(Html.BeginForm("NewPosting", "Blog", FormMethod.Post, new {id="Form1"})){ var Tags = string.Empty; foreach (var tag in Model.Tags) { Tags += tag.Name + ", "; } <div class="text-center"> <h1 class="display-4">Edit Posting</h1> <p> <!-- ... --> <div class="row"> <div class="col-lg-12"><input type="submit" value="Submit" class="btn btn-primary"></div> </div> </p> </div> } ``` Dann meine Klasse mit den Werten, in diesem Fall sind es die Tags hier im Blog. ``` C# public class Tag { public int Id { get; set; } public string Name { get; set; } public virtual ICollection<Posting> Postings { get; set; } } } ``` Dann der Code im Controller. Die Funktion Tag ``` C# public class BlogController : Controller { [Produces("application/json")] public JsonResult Tags(string term) // Das JavaScript fragt mit Blog/Tags?term=#### an { var jsonTags = new List<string>(); foreach(var tag in Postings.GetTags()) { if (string.IsNullOrWhiteSpace(term) || tag.Name.Contains(term)) { jsonTags.Add(tag.Name); } } return Json(jsonTags); } [Authorize] public IActionResult NewPosting(Posting posting, string Tags) { CreateTags(posting, Tags); if (posting.IsValid() && Postings.SavePosting(posting, User, false)) { return RedirectToAction(nameof(ViewPosting), new { id = posting.Id }); } return View(posting); } private void CreateTags(Posting posting, string Tags) { posting.Tags = new List<Tag>(); if (string.IsNullOrEmpty(Tags)) { return; } var tags = Tags.Split(',').ToList(); var OldTags = Postings.GetTags(); foreach (var tag in tags) { var trimed = tag.Trim(); if (string.IsNullOrWhiteSpace(trimed)) continue; if (OldTags.Any(item => item.Name == trimed)) { posting.Tags.Add(OldTags.First(item => item.Name == trimed)); } else { posting.Tags.Add(new Tag() { Name = trimed }); } } } } ```