I found an awesome AutoComplete tutorial (here: http://www.nodstrum.com/2007/09/19/autocompleter/#comment) using PHP, jQuery, MySQL, and decided to port it over to Microsoft’s ASP.NET MVC. Turned out to be way easier than I thought! You can download the auto-complete code sample here.

Configure MVC Controller

So this is basic: create a JsonResult method in your controller that runs a query. I’m using nHibernate and ActiveRecord to perform a top 10 query as you can see here:

public JsonResult GetCountry(string searchString)
{
StringBuilder sb = new StringBuilder();
ICriterion[] query = { Expression.Eq("Code", "COUNTRYLIST"), Expression.Like("Value",searchString, MatchMode.Start) };
LookupCode[] countries = LookupCode.SlicedFindAll(0, 10, query);
for (int i = 0; i < countries.Length; i++)
{
sb.Append("<li onClick=\"fill('" + countries[i].Value + "');\">" + countries[i].Description + "</li>");
}
return Json(sb.ToString());
}

Create jQuery Function

There are two jQuery functions we need. The first function simply calls the GetCountry method:

function lookup(inputString) {
$.post("/LookupCode/GetCountry", { searchString: "" + inputString + ""},
function(data) {
var myObject = eval('(' + data + ')');
if (data.length > 0) {
$("#suggestions").show();
$( "#autoSuggestionsList").html('<ul>' + myObject + '</ul>');
}
});
}

The second method is called from the auto-suggest list, and its job is to populate the selected value into the form field and to hide the auto-suggest list:

function fill(thisValue) {
$("#Country").val(thisValue);
setTimeout("$("#suggestions").hide();", 200);
}

Prep Textbox

There are two things we need to do to configure the textbox to trigger the auto-complete functionality:

1. Add the onkeyup=”lookup(this.value);” attribute within the input:

<input type="text" name="Country" id="Country"  onkeyup="lookup(this.value);"  />

2. Add a DIV to hold the suggestion list:

<div class="suggestionsBox" id="suggestions" style="display: none;">
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>

That’s it! For extra credit, we can add some style in the next step.

Add Style

The following style was taken and modified from the original tutorial (here: http://www.nodstrum.com/2007/09/19/autocompleter/#comment) , and is really easy to customize:

.suggestionsBox {
position: relative;
left: 5px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #e4e4e4;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #336699;
color:#333333;
}

.suggestionList {
margin: 0px;
padding: 0px;
}

.suggestionList ul {
margin: 0px;
padding: 0px;
}

.suggestionList li {
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 3px;
cursor: pointer;
}

.suggestionList li:hover {
list-style-type: none;
color:White;
background-color: #336699;
}

<div id="_mcePaste" style="overflow: hidden; position: absolute; left: -10000px; top: 106px; width: 1px; height: 1px;">function lookup(inputString,prefix) {
if (inputString.length == 0) {
$('#suggestions').hide();
} else {
$.post("/LookupCode/GetCountry", { id: "" + inputString + "", prefix: prefix },
function(data) {

var myObject = eval('(' + data + ')');
var suggestlist = "#" + prefix + "autoSuggestionsList";
var suggestfield = "#" + prefix + "suggestions";

if (data.length > 0) {

$(suggestfield).show();
$(suggestlist).html('<ul>' + myObject + '</ul>');
}
});
}
}
</div>