自动完成TextBox,用于多个项目,例如在Asp.net Mvc中的stackoverflow标签搜索部分

时间:2014-01-07 14:18:06

标签: javascript jquery asp.net-mvc-4 autocomplete

我尝试为多个项目获取AutoComplete TextBox。

我的观点看起来像

  $(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);
    }

如何将movienames(即字符串列表)传递给javascript中的可用标记。 在输出中它显示home / movienames.But我需要电影名称列表到可用标签。

1 个答案:

答案 0 :(得分:0)

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);
}