--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 :)
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 :)