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

【问题标题】：ASP.NET MVC "Editable" ListBoxASP.NET MVC“可编辑”列表框
【发布时间】：2015-02-10 08:01:30
【问题描述】：

我正在使用 ASP.NET MVC 平台。在我的控制器中，我正在创建 ViewBag，它从数据库中选择即所有名称。我的视图中有一个@Html.listbox，并且我正在使用 select2() ajax 函数，该函数用于在我在列表框中键入时提供建议。例如，如果我写“Ma”，我会按照建议列出 Maria、Mario、Martin，因为我在数据库中有它们。我的问题是我只能在它们之间进行选择，而不是添加不在数据库中的新名称。你能给我任何想法或例子吗？我想使用谷歌的一些建议，你输入，获取建议，选择一些东西，然后你可以改变它并将它添加到模型中。

这是我在视图中的代码：

<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 的函数，它工作得很好，现在的问题是，当我输入建议时，我的部分视图（在部分视图和索引视图之间）和我无法选择其中任何一个的形式（东西像大标签...）。有什么帮助吗？

【问题讨论】：

jQuery Autocomplete 允许你这样做
这看起来对我来说非常有用，我现在正尝试在我的代码中实现它。谢谢，您可以将其作为答案发布，以便我完成后接受。

标签： asp.net-mvc model-view-controller asp.net-ajax

【解决方案1】：

最后我像这样改变了我的脚本：

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

【讨论】：