AutoComplete Textbox in MVC using jQuery

As previous we have seen autocomplete in using jquery now we will learn that how to implement autocomplete functionality in mvc using jquery. For more understated we need to learn Entity Framework.


Creating an Entity Data Model:-

Step1:- After creating an application we click on the right click on model and chose ADO.NET Entity Data Model

Step2: -Then the Entity Data Model Wizard will open up where we select EF Designer database option.

Step4-We make a database connection (connection string) and then click Test Connection to make sure all settings are correct.

Step5: - The Connection String is generated

Step6: We get all tables from database and we select our table

Step7: -Now we have the Entity Data Model ready with the record Table 


using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.IO;
using System.Linq;
using System.Net;
using System.Net.Mail;
using System.Web;
using System.Web.Mvc;

namespace MVCCODESOLUTIONS.Controllers
    public class HomeController : Controller
        CodeSolutionEntities entities = new CodeSolutionEntities();

        public ActionResult Index()
            return View();

        public JsonResult AutoComplete(string prefix)


            CodeSolutionEntities entities = new CodeSolutionEntities();
            var fetchname = (from record in entities.records
                             where record.Name.StartsWith(prefix)
                             select new
                                 label = record.Name,

            return Json(fetchname);


    Layout = null;

<!DOCTYPE html>

    <meta name="viewport" content="width=device-width" />
    <style type="text/css">
        body {
            font-family: Georgia, 'Times New Roman', Times, serif;
            font-size: 10pt;
    <script src="" type="text/javascript"></script>
    <script src="" type="text/javascript"></script>
    <link href=""
          rel="Stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
                source: function (request, response) {
                        url: '/Home/AutoComplete/',
                        data: "{ 'prefix': '" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data, function (item) {
                                return item;
                        error: function (response) {
                        failure: function (response) {
                minLength: 1
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
        <input type="text" id="txtname" name="name" />



AutoComplete Textbox in MVC using jQuery AutoComplete Textbox in MVC using jQuery Reviewed by NEERAJ SRIVASTAVA on 5:22:00 PM Rating: 5


  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here.
    Kindly keep blogging. If anyone wants to become a Front end developer learn from javascript and jquery training in chennai .
    or learn thru Javascript Training in Chennai.
    Nowadays JavaScript has tons of job opportunities on various vertical industry. javascript and jquery training in chennai


Powered by Blogger.