Simple Way to Perform Autocomplete TextBox in MVC 5 Using JQuery

Follow Below steps to create the jquery bundle in your project:

Step 1: Create The Blank MVC application.

Step 2: Install JQuery UI package in package manager console,

install

Or Follow this link.

Step 3: Add JQuery buddle in your project using below step,

Step 4: Add Text Box in to your page,

  1. Auto Complete Text Box : <input type="text" id="AutoComplete" />  
Step 5: In script Tag add below code , Mention controller and action,
  1. <script>  
  2.     $(document).ready(function()  
  3.     {  
  4.   
  5.         $('#AutoComplete').autocomplete(  
  6.         {  
  7.             source: '@Url.Action("GetAutoComplete", "AutoComplete")'  
  8.         });  
  9.     })  
  10. </script>  
Step 6: Add the action as below , It should return the JSON , I have used hard coded values you may use dynamic values,
  1. public ActionResult GetAutoComplete(string term)   
  2. {  
  3.     if (string.IsNullOrWhiteSpace(term))   
  4.     {  
  5.         term = "";  
  6.     }  
  7.   
  8.   
  9.     string[] AutoCompleteOptions =   
  10.       {  
  11.         "AJAY",  
  12.         "AARAV",  
  13.         "VIJAY",  
  14.         "BHUPEN",  
  15.         "DHANANJAY",  
  16.         "Balashankar",  
  17.         "Chandan",  
  18.         "Daman",  
  19.         "Devguru",  
  20.         "Eshwar",  
  21.         "Falak",  
  22.         "Ganaraj",  
  23.         "Hemendra",  
  24.         "Ishrit",  
  25.         "Jagannath",  
  26.         "Kalan"  
  27.     };  
  28.     return this.Json(AutoCompleteOptions.Where(t => t.StartsWith(term, StringComparison.InvariantCultureIgnoreCase)),  
  29.         JsonRequestBehavior.AllowGet);  
  30. }  
Step 7: Run the project type text,

run

 

X

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

Start Learning Now