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

【问题标题】：Autocomplete items into list box将项目自动填充到列表框中
【发布时间】：2016-02-29 07:06:00
【问题描述】：

我正在尝试将自动完成结果填充到列表框中。当用户在文本框中键入时，结果应填充到列表框中。我正在使用 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);
 }

【问题讨论】：

您需要返回包含数据的json，而不是部分视图
源最好是数组或对象。为了提供帮助，最好设置一个带有相关示例的 jsfiddle.net。
试试source: [@Url.Action("TagSearch", "Home")]

标签： jquery asp.net-mvc jquery-ui

【解决方案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);

  }

【讨论】：