Autocomplete Textbox Using Database Return Value in ASP.NET Mvc3 Razor With Jquery

var suggestions = from s in db.Students
select s.FirstMidName ;
var namelist = suggestions.Where(n => n.ToLower().StartsWith(searchstring.ToLower()));

return Json(namelist, JsonRequestBehavior.AllowGet);
}

See here I have used "Jsonresult" instead of "ActionResult". That means the return data will be in a json format.

The searchstring is the user input text in the textbox.

Here my "SchoolContext" is the Entityframework database name.

After that I query the "Student" model class and get the firstname.

After that I query the "suggestions" variable with Lamdaexpression and check the "StartWith" method (marked as yellow) with our user given searchstring.

Finally we are returning with Jsonformat.

Next Step:

Now we have to write the Jquery code for the autocomplete extender property in to our "indesx.cshtml" file.

Please see the following code:

<script src="../../Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {

$("#SearchString").autocomplete({
source: "/Student/AutocompleteSuggestions",
minLength: 1,
select: function (event, ui) {
if (ui.item) {
$("#SearchString").val(ui.item.value);
$("form").submit();
}
}
});
});
</script>

That's it. Now after running the application it will look like the following image:



I have typed "s" and it is displaying all students beginning with 's' in the first name in the autocomplete extender property.

This example is made of VS2010, with Entity Framework.

Conclusion

So in this article we have learned how to use an autocomplete textbox with a value coming from the database using Jquery.

So try this out…It's a cool feature.