asp.net mvc настроить текстовое поле для поиска данных

Question

Я работаю с vs2010 с asp.mvc 4 и бритвой. В моем проекте в базе данных у меня есть таблица «человек», мне нужно настроить текстовое поле для asp.net mvc, поэтому, пока я набираю имя, будут показаны результаты, как показано на рисунке. 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; 
     }); 

    } 

CONTROLLER:

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

    } 

Приветствия