asp.net mvc自定義數據搜索的文本框

Question

我正在用asp.mvc 4和剃刀處理vs2010。 在我的項目到數據庫中我有一個表「人」，我需要自定義asp.net mvc的textboxfor，所以當我輸入名稱將顯示結果如附圖所示。 Facebook是搜索，我需要做的就是類似Facebook的人民搜索

Answer 1

您可以使用自動完成（http://jqueryui.com/autocomplete/）。

一些代碼，可能是有用的，讓你開始：

VIEW：

// ...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); 

    } 

乾杯