A day with .Net

My day to day experince in .net

Auto-complete with MVC 4 and Jquery

Posted by vivekcek on May 28, 2013

1. Refer required CSS and Jquery libraries(jquery,jquerui)

2. Implement a controller action like this

public JsonResult Search(string term)
        {
            List<Movie> Movies = new List<Movie> {new Movie(){ Title="Transformer", ReleaseYear=2008},
            new Movie(){ Title="Titanic", ReleaseYear=2008},
            new Movie(){ Title="Predator", ReleaseYear=2008},
            new Movie(){ Title="Men in blck", ReleaseYear=2008},
            new Movie(){ Title="Terminator", ReleaseYear=2009},
            new Movie(){ Title="Indiana jones", ReleaseYear=2009},
            new Movie(){ Title="Life is beautiful", ReleaseYear=2009},
            new Movie(){ Title="jurasic park", ReleaseYear=2007},
            new Movie(){ Title="Luck", ReleaseYear=2007},
            };

            var movies = Movies.Where(x => x.Title.StartsWith(term)).Select(r => new {label=r.Title });
            return Json(movies, JsonRequestBehavior.AllowGet);
        }

Please note that parameter name should be ‘term‘. And returned json result should contain a ‘label‘ attribute.

3. Now write the below script in your page.

$(function () {
    $('#SearchBox').autocomplete({
        source: '/Home/Search'
    });
});
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s