Our sample solution will make use of ASP.NET MVC 4, jQuery UI and PetaPoco for accessing a stock AdventureWorksLT SQL database. Sample solution source code is provided at the bottom of the post for those interested, now lets get started!

Next we'll create a SearchController class responsible for returning AdventureWorksLT.SalesLT.Product SQL data (as configured in the web.config's DbConnection connectionString) as a List<Keyword> object via the GetKeywords method call. It also makes use of some clever T-SQL syntax (much like a "Contains" filter for each whole word in the user's input). We're now able to data map SQL data to our POCO created earlier.

For this example, we'll expose JSON data via a /keywords URL. Simple, relavent and will be easily wired up with our Autocomplete via jQuery AJAX callbacks in our next section. Before that, however, we need to add some required MapRoute entries for resolving URLs.

As KeywordTerm values may be longer than our current input width, let's add some nifty expand/collapse jQuery animation to the Autocomplete. Upon the user typing, our input will quickly expand to make room for any lengthy returned values shown in the dropdown.

This works great, but what about forwarding the user to the sample product page upon selecting an item from within the dropdown? Simple. We'll add the following to the Autocomplete's select attribute to handle this.

We retrieve the selected item, split it into mdlNum and mdlName values, replace any non alphanumeric values with - characters to make things URL friendly and finally tell the browser to load the product display page. Note: Using window.location.replace does NOT maintain browser back button history. A suitable replacement would need to be used if history is desireable.