Using jQuery UI Autocomplete

 

Hi all, here’s an example of how to use jQuery UI Autocomplete in ASP MVC3.

The sample app I will show actually connects to a work related webservice, but you could use any repository you so wish.

Steps

Create a MVC3 application

Add jQuery UI (use nuget)

image

image

 

Create your UX

I just added the following to my Home/Index.cshtml view

image

 

Add a new script to your scripts folder

image

here you can see that on the page load, I wrap my input “#uris” and call the jQuery UI auto complete on it.

I set the source to /Home/GetModels  i.e. the GetModels function on the HomeController.cs

 

Add the GetModels function (click to enlarge)

image

Here you can see that I’m just using a webservice to search for entities called modelUris (just strings) and I return the first 10 matches.

For testing you could just use.

return Json(new string[] {“one”, “two”}, JsonRequestBehavior.AllowGet);

 

Here’s what it looks like

image