Simple Way to Perform Autocomplete TextBox in MVC 5 Using JQuery

In this blog you will learn 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,



Or Follow this link.

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

• Bundling And Minification In MVC - Part 2

Step 4: Add Text Box in to your page,

Auto Complete Text Box : <input type="text" id="AutoComplete" />

Step 5: In script Tag add below code , Mention controller and action,

<script>
    $(document).ready(function()
    {

        $('#AutoComplete').autocomplete(
        {
            source: '@Url.Action("GetAutoComplete", "AutoComplete")'
        });
    })
</script>

Step 6: Add the action as below , It should return the JSON , I have used hard coded values you may use dynamic values,

public ActionResult GetAutoComplete(string term)
{
    if (string.IsNullOrWhiteSpace(term))
    {
        term = "";
    }


    string[] AutoCompleteOptions =
      {
        "AJAY",
        "AARAV",
        "VIJAY",
        "BHUPEN",
        "DHANANJAY",
        "Balashankar",
        "Chandan",
        "Daman",
        "Devguru",
        "Eshwar",
        "Falak",
        "Ganaraj",
        "Hemendra",
        "Ishrit",
        "Jagannath",
        "Kalan"
    };
    return this.Json(AutoCompleteOptions.Where(t => t.StartsWith(term, StringComparison.InvariantCultureIgnoreCase)),
        JsonRequestBehavior.AllowGet);
}

Step 7: Run the project type text,