jquery - asp.net mvc 为数据搜索自定义文本框

Question

我正在使用带有 asp.mvc 4 和剃须刀的 vs2010。在我进入数据库的项目中，我有一个表“人”，我需要自定义 asp.net mvc 的 textboxfor，所以当我输入名称时，将显示结果，如附图所示。Facebook 是搜索，我需要做的是类似于 facebook 的人员搜索

Answer 1

您可以使用自动完成 ( http://jqueryui.com/autocomplete/ )。

一些可能有助于您入门的代码：

看法：

  // ...Other Stuff...

  <input type="text" name="PersonName" id="PersonName" />


  @section Scripts {

      @Styles.Render("~/Content/themes/base/css")
      @Scripts.Render("~/bundles/jquery")
      @Scripts.Render("~/bundles/jqueryui")
      @Scripts.Render("~/bundles/jqueryval")

      $("#PersonName").autocomplete({

                source: function (request, response) {
                    $.ajax({
                        url: '@Url.Action("SearchPerson", "Person")', type: "GET", 
                        dataType: "json",
                        data: { term: request.term },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return { Name: item.Name, Person: item.PersonID, value: item.Name };
                            }))
                        }
                    })

                },
                minLength: 3,
                select: function (event, ui) {
                    var selecteditem = ui.item;

                    // STUFF YOU WANT TO DO WITH THE SELECTED ITEM (like setting some HiddenField with an ID...)

                    // DEBUG:
                    //alert(ui.item ? ("You picked '" + selecteditem.Name : "Nothing selected");
                }
            });

            return false;
        });

  }

控制器：

    // GET : /Person/SearchPerson?term=term

    public ActionResult AutocompletePerson(string term)
    {

        var people = from p in db.Person
                     where p.Name.StartsWith(term)
                     select new { PersonID = p.PersonID, Name = p.Name)};

        return this.Json(people, JsonRequestBehavior.AllowGet);

    }

干杯