Part 42 - How to implement JQuery Autocomplete Textbox with data from server in Asp.net MVC application

Saturday, 15 July 2017

In this video you will be able to implement JQuery-UI Autocomplete Textbox with data from server side. Autocomplete feature used to display suggestion while we type into textbox.
For implementing this, you need to download latest version of Jquery UI . Click here to download the latest version of Jquery-UI.

The latest version will only be compatible with higher version of Jquery i.e. Jquery 1.7+ .

After downloading the latest version, add the .css , .js file and images into your project. In case if you find any problem the follow the steps as shown in the above video.

#Controller Code

Add a controller named "Test" and replace everything with below code. In below code, you will find three methods

a) Index () : This method will return view.

b) GetSuggestion(string text) : This method will return the JSON list of items matching with the parameter value.

using MVCTutorial.Models;
using System;
using System.Collections.Generic;
using System.Globalization;
using System.IO;
using System.Linq;
using System.Net;
using System.Threading;
using System.Web;
using System.Web.Mvc;

namespace MVCTutorial.Controllers
{

    public class TestController : Controller
    {

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


        [HttpGet]
        public JsonResult GetSuggestion(string text)
        {
            List<MyShop> ItemList = new List<MyShop>();

            ItemList.Add(new MyShop { ItemID = 1, ItemName = "Rice", IsAvailable = true });
            ItemList.Add(new MyShop { ItemID = 2, ItemName = "Pulse", IsAvailable = false });
            ItemList.Add(new MyShop { ItemID = 3, ItemName = "Salt", IsAvailable = false });
            ItemList.Add(new MyShop { ItemID = 4, ItemName = "Sugar", IsAvailable = true });
            ItemList.Add(new MyShop { ItemID = 5, ItemName = "Soap", IsAvailable = false });
            ItemList.Add(new MyShop { ItemID = 6, ItemName = "Book", IsAvailable = true });
            ItemList.Add(new MyShop { ItemID = 1, ItemName = "Apple", IsAvailable = true });
            ItemList.Add(new MyShop { ItemID = 2, ItemName = "Aeroplane", IsAvailable = false });
            ItemList.Add(new MyShop { ItemID = 1, ItemName = "Orange", IsAvailable = true });
            ItemList.Add(new MyShop { ItemID = 2, ItemName = "Boy", IsAvailable = false });
            ItemList.Add(new MyShop { ItemID = 1, ItemName = "Blackberry", IsAvailable = true });
            ItemList.Add(new MyShop { ItemID = 2, ItemName = "Lewis", IsAvailable = false });
            ItemList.Add(new MyShop { ItemID = 1, ItemName = "Women", IsAvailable = true });
            ItemList.Add(new MyShop { ItemID = 2, ItemName = "C++", IsAvailable = false });


            List<string> list = new List<string>();

            list = ItemList.Where(x => x.ItemName.ToLower().Contains(text.ToLower())).Select(x => x.ItemName).ToList();


            return Json(list, JsonRequestBehavior.AllowGet);
        }



    }
}

# View Page (Index.cshtml)

Right click on your controller' s Index method and add a view. After adding view, replace content with below code.

@model MVCTutorial.Models.EmployeeViewModel
@{
    ViewBag.Title = "Index";
    // Layout = null;
}

<div class="panel panel-body" style="min-height:256px">


    <div class="col-md-9">
        <h4>Technotips MVC tutorial</h4>
              
        <input type="text" class="form-control" id="textAutocomplete" />

    </div>

</div>

<script>

    //var autoSuggestionArray = ["Ashish", "Apple", "Orange", "Boy", "Girl"]

    $("#textAutocomplete").autocomplete({

        source: function (request, response) {
            var text = $("#textAutocomplete").val();

            $.ajax({
                type: "GET",
                url: "/Test/GetSuggestion",
                data: { text: request.term },
                success: function (data) {

                    response($.map(data, function (item) {

                        return { lable: item, value: item }

                    }))


                }

            })

        }
    });