Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

Tuesday, 4 March 2014

Autocomplete Textbox in MVC 4 & the exact plugins required to achieve it

--I was struggling for the plugins for autocomplete textbox for since last one day. Now finally I wrote the code got the correct plugins and it worked like a wonder.

MODEL
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Tesco.RetalixTenNFR.MVC.Models
{
    public class Employee
    {
        public string EmployeeNames { get; set; }
        public string EmployeeId { get; set; }

    }

}

CONTROLLER
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text.RegularExpressions;
using System.Web;
using System.Web.Mvc;
using Tesco.RetalixTenNFR.MVC.Models;

namespace Tesco.RetalixTenNFR.MVC.Controllers
{
    public class SearchStoreController : Controller
    {

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


        [HttpPost]
        public JsonResult Employeename(string term)
        {

            Employee Emp = new Employee();

            var data = new object();

            List<Employee> EmployeeList = new List<Employee>();

   EmployeeList.Add(new Employee { EmployeeNames = "Anurag", EmployeeId = "11" });
   EmployeeList.Add(new Employee { EmployeeNames = "Abhi", EmployeeId = "12" });
   EmployeeList.Add(new Employee { EmployeeNames = "Anupama", EmployeeId = "13" });
   EmployeeList.Add(new Employee { EmployeeNames = "Abhishek", EmployeeId = "114" });
   EmployeeList.Add(new Employee { EmployeeNames = "Anirudh", EmployeeId = "23" });
   EmployeeList.Add(new Employee { EmployeeNames = "Bibek", EmployeeId = "234" });

            if (Regex.IsMatch(term, "[0-9]"))
            {
                data = (from r in EmployeeList
                        where r.EmployeeId.Contains(term)
                        select new { r.EmployeeId }).Distinct();
            }

            else
            {
                data = (from r in EmployeeList
                        where r.EmployeeNames.Contains(term)
                        select new { r.EmployeeNames }).Distinct();
            }


            return Json(data, JsonRequestBehavior.AllowGet);

        }


    }

}

VIEW
@model Tesco.RetalixTenNFR.MVC.Models.Employee




<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#Employee").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/SearchStore/Employeename",
                    type: "POST",
                    dataType: "json",
                    data: { term: request.term },
                    success: function (data) {


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

                            if (item.EmployeeNames != null)

                                return {


                                    label: item.EmployeeNames,
                                    value: item.EmployeeNames
                                };

                            else {
                                return {


                                    label: item.EmployeeId,
                                    value: item.EmployeeId
                                };
                            }
                        }))

                    }
                })
            },
          
            minLength: 1
        });
    })

</script>
 <div style="font-family: Arial">
        <input type="text" id="Employee" placeholder="Search for a product" required />

</div>

OUTPUT


























--i have used contains.
--you can use startswith as per your requirement.

--Note : TOP 10 and distinct [And also if you type small letter it will search for results]

data = 
(from r in EmployeeList
where r.EmployeeId.ToUpper().StartsWith(term.ToUpper()) ||                     r.EmployeeNames.ToUpper().StartsWith(term.ToUpper())
select new Employee { EmployeeId=r.EmployeeId, EmployeeNames=r.EmployeeNames}).Distinct().Take(10);


--Note :data: { term: request.term }  should be same as in function.
       This term should be same as 
        public JsonResult Employeename(string term)
        {
         \\..........
        }
   
Hope you liked it :)