Add AutoComplete feature to Textbox in ASP.NET MVC using JQuery UI

Explore the Top Microsoft SQLServer Technical/ Interview Questions here: http://XploreSqlServer.blogspot.com/

   

Explore the Top Microsoft C# Technical/ Interview Questions here: http://XploreCSharpDotNet.blogspot.com

Explore the Top Microsoft Blazor Technical/ Interview Questions here: https://XploreBlazor.blogspot.com/

1. Add a reference to JQuery javascript file and jQuery UI javascript file in the Razor view or in the _Layout.cshtml :

<

script src="jquery-1.8.2.js" type="text/javascript"></script>

<script src="ui/1.9.0/jquery-ui.js" type="text/javascript"></script>

Download the recent version of jQuery and jQuery UI javascript file from here:

jQuery: http://jquery.com/download/
jQuery UI: http://jqueryui.com/download/

2. Add the following script block in the Razor View:

<

script type="text/javascript">

        $(function () {

          $("#txtCountry").autocomplete({

                source: '@Url.Action("SearchByCaption", "Country")'

         });

                 

        });

</

script>

The above script adds autocomplete feature to a textbox called txtCountry.

As the user types the characters in the textbox,  SearchByCaption method of CountryController is called through jQuery UI scripts. The typed string is passed as the parameter to the method.

3. Implement SearchByCaption action method in CountryController as follows:

public ActionResult SearchByCaption(string term)

{
       CountryBiz countryBiz;
       List<string> list;

       countryBiz = new CountryBiz(); 
       list = countryBiz.SearchByCaption(term);

       return Json(list, JsonRequestBehavior.AllowGet);
}

Important: the parameter of the action method should be named 'term'.

The SearchByCaption method of CountryBiz should perform the pattern search in the Country database table based on the parameter, 'term'.

Explore the Top Microsoft SQLServer Technical/ Interview Questions here: http://XploreSqlServer.blogspot.com/

Explore the Top Microsoft C# Technical/ Interview Questions here: http://XploreCSharpDotNet.blogspot.com