This blog defines
autocomplete TextBox in mvc3.
In your view
@model
Mvcsibaramhyjiya.Models.nameemail
@{
ViewBag.Title =
"Autocomp";
}
<link
rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"
temp_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"
temp_src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script
src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"
temp_src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function
() {
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
$("#email").bind("keydown",
function (event) {
if (event.keyCode === $.ui.keyCode.TAB &&$(this).data("autocomplete").menu.active)
{
event.preventDefault();
}
})
$("#email").autocomplete({
source:
function (request, response) {
//define a function to call your
Action (assuming UserController)
$.ajax({
url:
'/EntryPoint/GetEmailIds', type:
"GET", dataType: "json",
//query will be the param used by
your action method
data: {
query: request.term },
term:
extractLast(request.term),
success:
function (data) {
response($.map(data, function (item) {
return { label: item, value: item };
}))
}
})
},
search:
function () {
// custom minLength
var term = extractLast(this.value);
if (term.length < 1) {
return false;
}
},
focus:
function () {
// prevent value inserted on focus
return false;
},
select:
function (event, ui) {
this.value = ui.item.value;
return false;
//if u want to select items in
comma separate then
// var terms =
split(this.value);
// // remove the
current input
// terms.pop();
// // add the
selected item
//
terms.push(ui.item.value);
// // add
placeholder to get the comma-and-space at the end
// terms.push("");
// this.value =
terms.join(", ");
// return false;
}
});
});
</script>
@Html.TextBoxFor(m
=> m.email)
In your control
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.Mvc;
using
Mvcsibaramhyjiya.Models;
namespace
Mvcsibaramhyjiya.Controllers
{
public class
EntryPointController :
Controller
{
public ActionResult
Autocomp()
{
return View();
}
public ActionResult
GetEmailIds(string query)
{
query =
query.Replace(" ",
"");
if (query.Length > 1)
{
int op = query.LastIndexOf(",");
query =
query.Substring(op + 1);
}
List<nameemail> obj =
new List<nameemail>();
obj.Add(new
nameemail { name = "Ved", email =
"Ved@Ved" });
obj.Add(new
nameemail { name = "veda", email =
"veda@veda" });
obj.Add(new
nameemail { name = "vedant", email =
"vedant@vedant" });
var users = (from
u in obj
where u.name.Contains(query)
select u.email).Distinct().ToArray();
return Json(users,
JsonRequestBehavior.AllowGet);
}
}
}
In your model class
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
namespace
Mvcsibaramhyjiya.Models
{
public class
nameemail
{
public string
name { get; set;
}
public string
email { get; set;
}
}
}