Display AutoSuggest Textbox in Web API

Introduction

This articles describes the Auto Suggested TextBox in the Web API. Type a letter in the TextBox and press the Enter key. It then displays an Autosuggest list.

The following is the procedure for creating the application.

Step 1

Create a Web API application.

• Start Visual Studio 2012.
• From the start window Select "Installed" -> "Visual C#" -> "Web".
• Select "ASP.NET MVC4 Web Application" and click on the "Ok" button.

• From the "MVC4 Project" window select "Web API".

• Click on the "OK" button.

Step 2

Now select the "HomeController".

• In the "Solution Explorer".
• Expand the Controller folder.
• Select the "HomeController".

Add the following code:

using System;

using System.Collections.Generic;

using System.Data;

using System.Linq;

using System.Text;

using System.Web;

using System.Web.Mvc;

 

namespace AutosuggestTextAPI.Controllers

{

    public class HomeController : Controller

    {

        public ActionResult Index()

        {

            return View();

        }

        public DataTable Items()

        {

            DataTable cityname = new DataTable();

            cityname.Columns.Add("ID", typeof(int));

            cityname.Columns.Add("Level", typeof(string));

            cityname.Columns.Add("value", typeof(string));

            cityname.Columns.Add("word", typeof(string));

            DataRow dr = cityname.NewRow();

            dr["ID"] = 1;

            dr["Level"] = "2";

            dr["value"] = "Kanpur";

            dr["word"] = "KNP";

            cityname.Rows.Add(dr);

            dr = cityname.NewRow();

            dr["ID"] = 2;

            dr["Level"] = "3";

            dr["value"] = "Lucknow";

            dr["word"] = "LKW";

            cityname.Rows.Add(dr);

            dr = cityname.NewRow();

            dr["ID"] = 3;

            dr["Level"] = "4";

            dr["value"] = "Delhi";

            dr["word"] = "DLH";

            cityname.Rows.Add(dr);

            dr = cityname.NewRow();

            dr["ID"] = 3;

            dr["Level"] = "5";

            dr["value"] = "Banaras";

            dr["word"] = "BNA";

            cityname.Rows.Add(dr);

            dr = cityname.NewRow();

            dr["ID"] = 4;

            dr["Level"] = "6";

            dr["value"] = "Banglore";

            dr["word"] = "BNG";

            cityname.Rows.Add(dr);

            return cityname;

        }

        public ActionResult CityAutoSuggestByName(string autotext)

        {

            autotext = (autotext == null) ? "" : autotext;

            return Content(JsonForAutoSuggestforName(Items().Select("value  LIKE '%" + autotext + "%'")), "application/json");

        }

 

        static string loc;

        public static string JsonForAutoSuggestforName(DataRow[] datarow)

        {

            StringBuilder jsonBuilder = new StringBuilder();

            jsonBuilder.Append("[");

            for (int a = 0; a < datarow.Length; a++)

            {

                jsonBuilder.Append("{\"ID\": \"");

                jsonBuilder.Append(datarow[a][0].ToString());

                jsonBuilder.Append("\",");

                jsonBuilder.Append("\"Level\": \"");

                loc = datarow[a][2].ToString().Replace("\\", "\\\\");

                jsonBuilder.Append(loc.Replace("\"", "\\\""));

                jsonBuilder.Append("\",");

                jsonBuilder.Append("\"value\": \"");

                datarow[a][2].ToString().Replace("\\", "\\\\");

                jsonBuilder.Append(loc.Replace("\"", "\\\""));

                jsonBuilder.Append("\",");

                jsonBuilder.Append("\"word\": \"");

                loc = datarow[a][3].ToString().Replace("\\", "\\\\");

                jsonBuilder.Append(loc.Replace("\"", "\\\""));

                jsonBuilder.Append("\",");

                jsonBuilder.Remove(jsonBuilder.Length - 1, 1);

                jsonBuilder.Append("},");

            }

            jsonBuilder.Remove(jsonBuilder.Length - 1, 1);

            jsonBuilder.Append("]");

            string jason = jsonBuilder.ToString();

            return jsonBuilder.ToString();

        }      

    }

}

  Step 3

Now write some HTML code in the "index.cshtml" file. This file exists:

• In the "Solution Explorer".

• Expand "Views" folder.

• Select "Home" -> "index.cshtml".

Add the following code:

@{ ViewBag.Title = "Using AutoSuggest on Enter Key"; }

<table>

 <tr>                    

                                <td style="width:320px">                        

                                     @Html.TextBox("CityName", "", new { @style = "width:320px;outline: 2px solid #FBEC88" })                           

                                </td>                                                 

                             </tr>

</table>

@section JavaScript {

    <script type="text/javascript">

        $(document).ready(function () {

            $("#CityName").autocomplete({

                search: function (event, ui) {

                    var k = event.keyCode;

                    if (k == 13) {

                        return true;

                    }

                    else

                        return false;

                },

                source: function (request, response) {

                    $.ajax({

                        url: '@Url.Action("CityAutoSuggestByName")',

                        data: { autotextext: request.term },

                        dataType: 'json',

                        type: 'POST',

                        success: function (data) {

                            response(data);

                        }

                    });

                },

                select: function (event, ui) {

                    $('#CityName').val(ui.city ? ui.city.value : 'Select');

                }

            });

        });

    </script>

}

Step 4

Select the "_Layout.cshtml" file.

• In the "Solution Explorer".

• Expand "Views" folder.

• Select "Shared" -> "_Layout.cshtml".

Add the following code:

<!DOCTYPE html>

<html>

<head>

    <title>@ViewBag.Title</title>

    <link href="@Url.Content("~/Content/site.css")" rel="stylesheet" type="text/css" />

    <link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />  

</head>

<body>

    <div class="page">

        <div id="header">

            <div id="title">

                <h1>For AutoSuggested List Press Enter</h1>

            </div>     

        </div>

        <div id="main">

            @RenderBody()

            <div id="footer">

            </div>

        </div>

    </div>

     <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>

       <script src="@Url.Content("~/Scripts/jquery-ui-1.8.7.min.js")" type="text/javascript"></script>

    @RenderSection("JavaScript", false)

</body>

</html>

 

 Step 5

Execute the application: