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)

Create your UX

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

Add a new script to your scripts folder

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)

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

I’ve discovered a nice set of jQuery filter selectors.

Take this example of selecting the checked radio button in a group

Markup

Script

There are many many others, e.g. @contains, :disabled, :not(selector), :parent, :password, etc etc, more info in jQuery docs.

If you’ve been to a HTML5 session or lived in the html5 world for any length of time you’ll have come across the term “Progressive Enhancement”. It’s about taking a base application that works on downstream browsers and detecting features and increasing functionality if you have certain features.

Take example local or session storage, in older versions of browsers there was no local storage so there would be more round tripping.

So how do we detect these features? One method is a javascript file called Modernizr that detects feature availability (rather than using a database etc).

Syntax:

   1:  if (Modernizr.localstorage) 

   2:  {    

   3:      // browser supports local storage

   4:  }

   5:  else 

   6:  {    

   7:      // browser doesn't support local storage

   8:  }

   9:   

 Check out modernizer it's got many detection and abstracts you from detection techniques.

You’ll get this script added to your project for free in MVC3.