Autocomplete TextBox in MVC3 Razor

This blog defines autocomplete TextBox in mvc3.

In your view
 

@model Mvcsibaramhyjiya.Models.nameemail

@{

    ViewBag.Title = "Autocomp";

}

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" temp_href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.9.1.js" temp_src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" temp_src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

 

<script>

       $(function () {

    function split(val) {

        return val.split(/,\s*/);

    }

    function extractLast(term) {

        return split(term).pop();

    }

    $("#email").bind("keydown", function (event) {

        if (event.keyCode === $.ui.keyCode.TAB &&$(this).data("autocomplete").menu.active) {

            event.preventDefault();

        }

    })

    $("#email").autocomplete({

        source: function (request, response) {

            //define a function to call your Action (assuming UserController)

            $.ajax({

                url: '/EntryPoint/GetEmailIds', type: "GET", dataType: "json",

                //query will be the param used by your action method

                data: { query: request.term },

                term: extractLast(request.term),

                success: function (data) {

                    response($.map(data, function (item) {

                        return { label: item, value: item };

                    }))

                }

            })

        },

        search: function () {

            // custom minLength

            var term = extractLast(this.value);

            if (term.length < 1) {

                return false;

            }

        },

        focus: function () {

            // prevent value inserted on focus

            return false;

        },

        select: function (event, ui) {

            this.value = ui.item.value;

            return false;

            //if u want to select items in comma separate then

            //                var terms = split(this.value);

            //                // remove the current input

            //                terms.pop();

            //                // add the selected item

            //                terms.push(ui.item.value);

            //                // add placeholder to get the comma-and-space at the end

            //                terms.push("");

            //                this.value = terms.join(", ");

            //                return false;

        }

    });

});

 

</script>

 

@Html.TextBoxFor(m => m.email)


In your control
 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using Mvcsibaramhyjiya.Models;

 

namespace Mvcsibaramhyjiya.Controllers

{

    public class EntryPointController : Controller

    {

 

        public ActionResult Autocomp()

        {

            return View();

        }

        public ActionResult GetEmailIds(string query)

        {

            query = query.Replace(" ", "");

            if (query.Length > 1)

            {

                int op = query.LastIndexOf(",");

                query = query.Substring(op + 1);

            }

            List<nameemail> obj = new List<nameemail>();

            obj.Add(new nameemail { name = "Ved", email = "Ved@Ved" });

            obj.Add(new nameemail { name = "veda", email = "veda@veda" });

            obj.Add(new nameemail { name = "vedant", email = "vedant@vedant" });

 

            var users = (from u in obj

                         where u.name.Contains(query)

                         select u.email).Distinct().ToArray();

            return Json(users, JsonRequestBehavior.AllowGet);

        }

    }

} 

In your model class
 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

 

namespace Mvcsibaramhyjiya.Models

{

    public class nameemail

    {

        public string name { get; set; }

        public string email { get; set; }

    }

}

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now