jQuery AutoComplete with categories in MVC3 Razor

Home » jQuery AutComplete » jQuery AutoComplete with categories in MVC3 Razor

jQuery AutoComplete with categories in MVC3 Razor

Posted by 20Fingers2Brains on Tags: jQuery AutComplete

In this article we will see how to show the autocomplete result based on categories.
We will also see how to use this autocomplete widget in MVC3 Razor.

Following are the steps :

ViewModel :

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

namespace jQueryDatePicker.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.

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.

View :

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

<h2>Index</h2>

<style>
 .ui-autocomplete-category {
  font-weight: bold;
  padding: .2em .4em;
  margin: .8em 0 .2em;
  line-height: 1.5;
 }
 </style>

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


<script type="text/javascript">
    $.widget("custom.catcomplete", $.ui.autocomplete, {
        _renderMenu: function (ul, items) {
            var that = this,
    currentCategory = "";
            $.each(items, function (index, item) {
                if (item.category != currentCategory) {
                    ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
                    currentCategory = item.category;
                }
                that._renderItemData(ul, item);
            });
        }
    });

    $(function () {
        var data = [
   { label: "Fabregas", category: "Football" },
   { label: "Messi", category: "Football" },
   { label: "Ronaldo", category: "Football" },
   { label: "Ronaldinho", category: "Football" },
   { label: "Sachin", category: "Cricket" },
   { label: "Dravid", category: "Cricket" },
   { label: "James", category: "BasketBall" },
   { label: "Bryant", category: "BasketBall" },
   { label: "Federer", category: "Tennis" },
            { label: "Nadal", category: "Tennis" },
            { label: "Djokovic", category: "Tennis" }
  ];

        $("#Username").catcomplete({
            delay: 0,
            source: data
        });
    });
 </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.
In the above example, with the result, we are also showing the categories to which result belongs.

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 :

Type r in the textbox.

In the above demo, when you enter any letter, the autocomplete widget shows the possible values for the entered letter. The result will be shown category wise.

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