将项目自动填充到列表框中

Question

我正在尝试将自动填充结果填充到列表框中。当用户在文本框中键入内容时，应将结果填充到列表框中。我正在使用Jquery-Ui小部件来完成这项工作。但是，它没有在列表框中填充任何内容。

列表框位于部分视图中。

视图

@model IEnumerable<string>

<script src="~/Scripts/jquery-2.2.1.js"></script>
<script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>

<input type="text" id="tags" />

@Html.Partial("_PartialView", Model)

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

</script>

部分视图

@model IEnumerable<string>

@foreach(var str in Model)
{
    Html.ListBox(str);
}

控制器

 public ActionResult TagSearch(string term)
 {
        var tags =  new List<string>
        {
            "ASP.NET",
            "WebForms",
            "MVC", 
            "jQuery", 
            "ActionResult",
            "MangoDB",
            "Java", 
            "Windows"
        };

        var rsult = tags.Where(x=>x.StartsWith(term));
        return PartialView("_PartialView", rsult);
 }

Answer 1

从@Stephen Muecke那里获取想法，我删除了局部视图并更改了我的视图和控制器，如下所示。这对我有用。

视图

@model IEnumerable<string>

<script src="~/Scripts/jquery-2.2.1.js"></script>
<script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>

<table>
    <tr>
        <td>
            <input type="text" id="tags" />
        </td>
    </tr>
    <tr>
        <td>
            @Html.ListBox("MyList", new SelectList(new[] { "" }))
        </td>
    </tr>
</table>


<script type="text/javascript">
    $("#tags").autocomplete({
        source: function (request) {
            $.ajax({
                async: false,
                cache: false,
                type: "POST",
                url: "@(Url.Action("TagSearch", "Home"))",
                data: { "term": request.term },
                success: function (data) {
                    $('#MyList').empty();
                    for (var i = 0; i < data.length ; i++) {
                        $('#MyList').
                            append($("<option selected='selected'></option>").attr("value", data[i]).text(data[i]));
                    }
                }
            });
        }
    });
</script>

控制器

 [HttpPost]
 public ActionResult TagSearch(string term)
 {
      var tags =  new List<string>
      {
                "ASP.NET",
                "WebForms",
                "MVC", 
                "jQuery", 
                "ActionResult",
                "MangoDB",
                "Java", 
                "Windows"
       };

       var rsult = tags.Where(x=>x.StartsWith(term));
       return Json(rsult, JsonRequestBehavior.AllowGet);

  }