ASP.NET MVC“可编辑”列表框

我正在使用ASP.NET MVC平台。在我的控制器中，我创建了ViewBag，它可以选择数据库中的所有名称。我在我的视图中有一个@ Html.listbox，我使用select2（）ajax函数，用于在列表框中输入时提示。例如，如果我写“马”，我会列出玛丽亚，马里奥，马丁，因为我有他们在数据库中。我的问题是，我只能在它们之间进行选择，而不是添加不在数据库中的新名称。你能给我任何想法或例子我怎么能做到这一点？我想使用Google提供的一些建议，您键入，获取建议，选择一些内容，然后您可以对其进行更改并将其添加到模型中。ASP.NET MVC“可编辑”列表框

这里是我的视图代码：

<div class="form-group"> 
    @Html.LabelFor(model => model.Names, htmlAttributes: new { @class = "control-label col-md-3" }) 
    <div class="col-md-6"> 
     @Html.ListBoxFor(model => Model.Names, null, new { @class = "form-control input-sm" }) 
     @Html.ValidationMessageFor(model => model.Names, "", new { @class = "text-danger" }) 
    </div> 
</div> 

<script type="text/javascript"> 

    $(function() { 

     $("#Names").select2({ 
      placeholder: "Filter names", 
      maximumSelectionSize: 1, 
     }); 

    }); 
</script>

，我在控制器做这在我的GET：

// GET: Names/Create 
public ActionResult Create() 
{ 
    ViewBag.Names= new SelectList(db.Names.Select(n => n.Names)); 
    return PartialView("_Create"); 
}

编辑：
我现在使用jQuery的自动完成这样的：

<script type="text/javascript"> 

    $(function() { 
     $("#tags").autocomplete(
      { 
       source: '@Url.Action("TagSearch", "Home")' 
      }); 
    }) 
</script>

我改变了我的html.textbox像这样：

<div class="form-group"> 
      <div class="col-md-6"> 
       <div class="ui-widget"> 
        @Html.TextBoxFor(model => Model.Names, null, new { @class = "form-control input-sm", @id = "tags" }) 
       </div> 
        @Html.ValidationMessageFor(model => Model.Names, "", new { @class = "text-danger" }) 
      </div> 
     </div>

另外我有一个返回JSON和它完美的作品，现在的问题是，当我在建议中键入的功能在部分视图背后（在部分视图和索引视图之间）以及我无法选择其中任何一个的形式（像大标签......）。对此有何帮助？

来源

2015-02-10 KOmrAD

jQuery的[自动完成]（http://jqueryui.com/autocomplete/#multiple）允许你这样做 – 2015-02-10 08:09:23

这看起来喜欢的事，可真对我有用，我正试图在我的代码中实现它。谢谢，你可以把它作为答案发布，这样我就可以在完成时接受它。 – KOmrAD 2015-02-10 08:36:12

在我最终改变我的脚本是这样结尾：

<script type="text/javascript"> 

    $(function() { 
     $("#tags").autocomplete(
      { 
       source: '@Url.Action("TagSearch", "Home")', 

       open: function(){ 
        setTimeout(function() { 
         $('.ui-autocomplete').css('z-index', 99999999999999); 
        }, 0); 
       } 

      }); 
     return false; 
    }) 
</script>

我曾与z轴的一个问题，这完全固定我的问题，使用自动完成像斯蒂芬评论建议后。

我认为最终版本是这样的：

<div class="form-group"> 
    <div class="col-md-6 ui-widget"> 
     @Html.EditorFor(model => Model.Names, new { @class = "form-control input-sm", @id = "tags" }) 
     @Html.ValidationMessageFor(model => Model.Names, "", new { @class = "text-danger" }) 
    </div> 
</div>

来源

2015-02-10 14:24:19 KOmrAD

ASP.NET MVC“可编辑”列表框

回答

相关问题