Question

我正在使用ASP.NET MVC平台。在我的控制器中，我正在创建ViewBag，它选择数据库中的所有名称。我在我的视图中有一个@ Html.listbox，我正在使用select2（）ajax函数，用于在列表框中键入时建议。例如，如果我写＆＃34; Ma＆＃34;我列出了玛丽亚，马里奥，马丁的建议，因为我将它们放在数据库中。我的问题是我只能在它们之间进行选择，而不是添加不在数据库中的新名称。你能告诉我如何实现这一目标的任何想法或例子吗？我想使用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>

此外，我有一个返回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轴有问题，这在使用像Stephen在评论中建议的自动完成后，完美地解决了我的问题。

我的观点的最终版本是：

<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＆＃34;可编辑＆＃34;列表框

1 个答案: