Author : Guest
Total Views : 94
Posted On : Thu, Apr 26, 2018
Updated On : Fri, Apr 27, 2018

jQuery ajax autocomplete using Asp.Net MVC

In this article, you will learn to create a jQuery Autocomplete using Asp.Net MVC.

HTML

Let's create the HTML page and create the required controls.

<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
 
    @*Always remember to add these files on your page*@
    <link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
    <link href="~/Content/themes/base/autocomplete.css" rel="stylesheet" />
 
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
    <title>JQuery Examples</title>
</head>
<body>
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3>
                    JQuery auto-complete example
                </h3>
            </div>
            <div class="panel-body">
                <b>Enter name :</b>
                <input type="text" name="name" value=" " id="txtName" class="form-control" style="width:200px;" />
                <div class="well" id="log" style="margin:10px;">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

JavaScript

Following jQuery creates a autocomplete on a textbox with id txtName

<script>
    $(document).ready(function () {
 
        $("#txtName").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "@Url.Action("GetNames")",
                    dataType: "json",
                    type: "GET",
                    data: {
                        term: request.term.trim()
                    },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.Name,
                                value: item.Id 
                            }
                        }));
                    }
                })
            },
            select: function (event, ui) {
                $("#log").text(ui.item.value); 
            }
        });
    });
</script>

Controller Action Method

Following controller action method creating a list of employees and searching for the particular employees based on the given term, after completing the search it is returning the result in JSON format.

public JsonResult GetNames(string term)
{
    List<Employee> Employees = new List<Employee>();
    Employees.Add(new Employee() { Id = 1, Name = "Aston" });
    Employees.Add(new Employee() { Id = 2, Name = "Bhishma" });
    Employees.Add(new Employee() { Id = 3, Name = "Crown" });
    Employees.Add(new Employee() { Id = 4, Name = "David" });
    Employees.Add(new Employee() { Id = 5, Name = "Elger" });
    Employees.Add(new Employee() { Id = 6, Name = "Farahan" });
    Employees.Add(new Employee() { Id = 7, Name = "Gibson" });
    Employees.Add(new Employee() { Id = 8, Name = "Andre" });
    Employees.Add(new Employee() { Id = 9, Name = "Emmey" });
    Employees.Add(new Employee() { Id = 10, Name = "Evan" });
 
    var result = (from c in Employees where c.Name.StartsWith(term) select c).ToList();
    return Json(result, JsonRequestBehavior.AllowGet);
}
public class Employee
{
    public int Id { get; set; }
    public string Name { get; set; }
}

OutPut