jQuery Autocomplete with scrollable results in MVC3 Razor

Home » jQuery AutComplete » jQuery Autocomplete with scrollable results in MVC3 Razor

jQuery Autocomplete with scrollable results in MVC3 Razor

Posted by 20Fingers2Brains on Tags: jQuery AutComplete

In this article we will see how to use jQuery Autocomplete widget.
We will also see how to see result with scrollbar.
In order to apply scrollbar we need to specify height for the extended portion which shows the result.
When displaying a long list of options, you can simply set the max-height for the autocomplete menu to prevent the menu from growing too large.

Following are the steps :

VieModel :

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 {
  max-height: 100px;
  overflow-y: auto;
  /* prevent horizontal scrollbar */
  overflow-x: hidden;
 }
 * html .ui-autocomplete {
  height: 100px;
 }
 </style>

@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.
Using style classes we have applied maximum height and scroll. When the result height increases 100px, scroll bar is displayed.

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 or s.

In the above demo, when you enter any letter, the autocomplete widget shows the possible values for the entered letter. When the result list height increases above specified max-height scrollbar is displayed.

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