ASP.NET MVC "Editable" 列表框

Question

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

这是我在视图中的代码：

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

我还有一个 returns JSON 的功能，它工作得很好，现在的问题是，当我输入建议时，建议在我的部分视图后面（在部分视图和索引视图之间）并且以我的形式出现不能选择其中任何一个（比如大标签……）。有什么帮助吗？

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

ASP.NET MVC "Editable" 列表框

ASP.NET MVC "Editable" ListBox

model-view-controller

asp.net-mvc

asp.net-ajax