Auto complete input textbox using jquery in ASP.NET MVC

 Auto complete input textbox with jquery in ASP.NET MVC

In this post we will discuss about how to perform auto complete with input text box using jquery in asp.net mvc.



AutoCompleteAddressController.cs :-

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;


namespace Learn_mvc.Controllers
{
    public class AutoCompleteAddressController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult AutoSearchModel()
        {
            return View();
        }

        public ActionResult FetchModels(string query)
        {
            var models = new List<ModelMachine>() { 
                new ModelMachine { ModelNumber="M101", ModelDesc= "This is M101 model machine" },
                new ModelMachine { ModelNumber="M102", ModelDesc= "This is M102 model machine" }
            };
            var dictionaries = models.ToDictionary(prop => prop.ModelNumber, prop => prop.ModelDesc).ToList();
            return Json(dictionaries, JsonRequestBehavior.AllowGet);
        }
    }

    public class ModelMachine
    {
        public string ModelNumber { get; set; }
        public string ModelDesc { get; set; }
    }
}



AutoSearchModel.cshtml :-

@{
    ViewBag.Title = "AutoSearchModel";
}

<input id="inpModelNumber" type="text" class="form-control" placeholder="Model Number" />
<div id="menu-container1" class="menu-container"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>   
 <script>
        $(function () {
            var mcache = {}, lastMXhr;
            var pcache = {}, lastPXhr;

            $('#inpModelNumber').on("keydown", function (event) { }).autocomplete({
                scroll: true,
                source: function (request, response) {
                    var prefixText = request.term.toLowerCase();

                    if (prefixText in mcache) {
                        response(formatAutocompleteResponse(mcache[prefixText]));
                        return;
                    }

                    lastMXhr = $.getJSON('/AutoCompleteAddress/FetchModels', { query: prefixText }, function (data, status, xhr) {
                        mcache[prefixText] = data;
                        if (xhr === lastMXhr) {
                            response(formatAutocompleteResponse(data));
                        }
                    });
                },
                appendTo: '#menu-container1'
            })

            function formatAutocompleteResponse(data) {

                var uiData = []

                $.each(data, function (k,v) {
                    uiData.push({ label: v.Key + ' ' + v.Value, value: v.Key });
                });

                return uiData;

            }
        });
    </script>    

Comments

Post a Comment

Popular posts from this blog

Call CRUD(GET, POST, PUT, DELETE) API using WebClient in c#

          Here We will see how we can call all CRUD methods (GET, PUT, POST, DELETE) with the help of WebClient in c#. you will need to add reference of "System.Web.Extensions" assembly to your project. 1. Call POST API :-     string apiUrl = "http://localhost:26404/api/POSTAPI";     object input = new     {         Name = txtName.Text.Trim()     };     string inputJson = (new JavaScriptSerializer()).Serialize(input);     WebClient client = new WebClient();     client.Headers["Content-type"] = "application/json";     client.Encoding = Encoding.UTF8;     string json = client.UploadString(apiUrl + "/PostCustomers","POST", inputJson); 2. Call GET API :-     string apiUrl = "http://localhost:26404/api/GETAPI";     WebClient client = new WebClient();     client.Headers["Content-type"] = "app...
Read more

Asp.Net MVC 5 authentication and authorization using claims principal

Asp.Net MVC 5 authentication and authorization using claims principal :- Step1 : File -> New Project -> Asp.Net Web Application -> Asp.Net 4.5.2 Templates Choose empty MVC project template Step2 : Install following nuget packages Microsoft.AspNet.Identity.Core Microsoft.AspNet.Identity.Owin Microsoft.Owin Microsoft.Owin.Host.SystemWeb Microsoft.Owin.Security Microsoft.Owin.Security.Cookies Microsoft.Owin.Security.OAuth Owin Step3 : Create a Owin Startup class and decorate with assembly attribute OwinStartup. using Microsoft.AspNet.Identity; using Microsoft.Owin; using Microsoft.Owin.Security.Cookies; using Owin; [assembly: OwinStartup(typeof(AspNetMVC5Authorization.Startup))]  // here "AspNetMVC5Authorization" is the name of project namespace AspNetMVC5Authorization { public class Startup { public void Configuration(IAppBuilder app) { ConfigureAuthenticat...
Read more