Provide a link:
<link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
write a script as:
$(function () {
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
$("#NewAddress").bind("keydown", function (event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$(this).data("autocomplete").menu.active) {
event.preventDefault();
}
})
$("#NewAddress").autocomplete({
source: function (request, response) {
$.ajax({
url: '/Controller/action', type: "GET", dataType: "json",
data: { query: request.term },
term: extractLast(request.term),
success: function (data) {
response($.map(data, function (item) {
return { label: item, value: item };
}))
}
})
},
search: function () {
var term = extractLast(this.value);
if (term.length < 1) {
return false;
}
},
focus: function () {
return false;
},
select: function (event, ui) {
var terms = split(this.value);
terms.pop();
terms.push(ui.item.value);
terms.push("");
this.value = terms.join(", ");
return false;
}
});
});
In the view body write:
<%=Html.TextBoxFor(m => m.NewAddress)%>
in the controller :
public ActionResult GetEmailIds(string query)
{
query = query.Replace(" ", "");
if (query.Length > 1)
{
int op = query.LastIndexOf(",");
query = query.Substring(op + 1);
}
var users = (from u in _userService.GetAllUsers()
where u.EmailAddress.Contains(query)
orderby u.EmailAddress
select u.EmailAddress).Distinct().ToArray();
return Json(users, JsonRequestBehavior.AllowGet);
}