jQuery AutoComplete in MVC3 Razor

Home » jQuery AutComplete » jQuery AutoComplete in MVC3 Razor

jQuery AutoComplete in MVC3 Razor

Posted by 20Fingers2Brains on Tags: jQuery AutComplete

In this article we will see what does jQuery Autocomplete offers and how to use it in MVC3 Razor.
jQuery provides easy way to achieve auto complete functionality.
AutoComplete means textbox will show the options that can be choosen based on user's input.
The Autocomplete widgets provides suggestions while you type into the field.

Following are the steps :

ViewModel :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace jQueryAutoComplete.Models
{
    public class Register
    {
        public string Username { get; set; }
    }
}

We have created a simple ViewModel, having a single property named Username. We will bind this ViewModel to View.

View :

@model jQueryAutoComplete.Models.Register
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

@Html.EditorFor(Model => Model.Username)


<script type="text/javascript">
    $(document).ready(function () {

        var userArray = ["Fabregas",
        "Messi",
        "Ronaldinho",
        "Henry",
        "Cazorla",
        "Goetze",
        "Reus",
        "Luiz",
        "Rooney",
        "Ronaldo",
        "Iniesta",
        "Silva",
        "Gerrard",
        "Scholes"];

        $("#Username").autocomplete({
            source: userArray
        });
    });
</script>

In the View we have added the reference of our ViewModel. We have used @Html.EditorFor to render control for our Username property. This will render a textbox control with id and name attribute set to Username.
In the script section we have created a array of football players. This array is used as source for autocomplete function. We have used id of textbox to select the textbox and used autocomplete function to use the autocomplete functionality.

Controller :

public ActionResult Index()
        {
            Register model = new Register();
            return View(model);
        }

In the controller , we have a action method. In the action method we creating an object of ViewModel class and we are passing it to the view.

Layout :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-1.8.3.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.widget.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.effect.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.autocomplete.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.menu.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.position.min.js")" type="text/javascript"></script>
</head>

<body>
    @RenderBody()
</body>
</html>

The above is our layout. We need to include references of above script files. This layout is referred in out View.

Demo :

In the above demo, when you enter any letter, the autocomplete widget shows the possible values for the entered letter.

This is how jQuery Autocomplete works and we can integrate in MVC3 Razor in above way.