多个项目的自动完成文本框，如 Asp.net Mvc 中的 stackoverflow 标签搜索部分

Question

我尝试获取多个项目的自动完成文本框。

我的观点看起来像

  $(function () {
      var availableTags = Html.Raw(Json.Encode(ViewBag.movies));
      function split(val) {
          return val.split(/,\s*/);
      }
      function extractLast(term) {
          return split(term).pop();
      }

      $("#tags")
      // don't navigate away from the field on tab when selecting an item
  .bind("keydown", function (event) {
      if (event.keyCode === $.ui.keyCode.TAB &&
        $(this).data("ui-autocomplete").menu.active) {
          event.preventDefault();
      }
  })
  .autocomplete({
      minLength: 0,
      source: function (request, response) {              
          response($.ui.autocomplete.filter(
        availableTags, extractLast(request.term)));
      },




  @using (@Html.BeginForm())
   {
    <b>Search Movie</b>
    @Html.TextBox("tags", null, new { id = "tags" })
   @* @Html.TextBoxFor(m => m.nam, new { id = "txtSearch", name = "SearchTerm" })*@
    }

我的控制器动作方法如下所示

   public JsonResult GetMovieNames(string term)
    {
        List<string> mnames = db.Movienames(term).ToList();
        var rows = mnames.ToArray();
        ViewBag.movies = rows;
        return Json(mnames, JsonRequestBehavior.AllowGet);
    }

如何将电影名称（即字符串列表）传递给 javascript 中的可用标签。 在输出中它显示家庭/电影名称。但我需要将电影名称列表到可用标签中。

Answer 1

将class 属性应用于需要自动完成功能的元素并使用以下代码。检查documentation

查看documentation 以获取完整的代码示例

$( ".className" ))
.autocomplete({
 source: function( request, response ) {
 $.getJSON( "search.php", {
 //cosntruct it
 }, response );
}

更新：如果使用 MVC，只需将 search.php 更改为 \Controller\Search

这里是为自动完成构建基于 JSON 的输出的示例代码

public JsonResult Search(string term)
{
    List<Records> recs = new List<Records>();           
    var rows = recs.ToArray();
    return Json(rows, JsonRequestBehavior.AllowGet);
}