Autocomplete with custom menu design
Index.cshtml:
<link href="@Url.Content("~/Content/AC1/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Content/AC1/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/AC1/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<h2>Index</h2>
<input type="text" id="txtUserSearch" />
<script type="text/javascript">
$(document).ready(function () {
$('#txtUserSearch').autocomplete({
source: '@Url.Action("GetMatchingUser", "AC4")',
minLength: 1,
select: function (event, ui) {
alert(ui.item.id
);
window.location.href
= '@Url.Action("ProfilePage", "AC4")' + '?who=' + ui.item.id;
},
}).autocomplete( "widget" ).addClass( "whatever" );
$.ui.autocomplete.prototype._renderItem = function (ul, item) {
//alert(item.id + '\n' +
item.value + '\n' + item.label + '\n' + item.description + '\n' + item.image);
var inner_html =
'<a><div
class="list_item_container">' +
'<div
class="item_image im"><img src="' + item.image + '"></div>' +
'<div
class="item_label">' + item.label + '</div>' +
'<div
class="item_description">' + item.description + '</div>' +
'</div></a>';
return $("<li></li>")
.data("item.autocomplete", item)
.append(inner_html)
.appendTo(ul);
};
});
</script>
AC4Controller:
public class AC4Controller : Controller
{
public ActionResult Index()
{
return View();
}
public JsonResult GetMatchingUser(string term)
{
Response.CacheControl
= "no-cache";
var usrScreenNamelst =
GetList().Where(a => (a.UserScreenName.Contains(term) ||
a.UserFirstName.Contains(term) ||
a.UserLastName.Contains(term))).ToList();
string userProfileImagePath = "~/Content/AC4/Images/";
var lst =
usrScreenNamelst.Select(m => new
{
id = m.UserId,
value =
m.UserScreenName,
label =
m.UserScreenName,
description =
m.UserFirstName + " " + m.UserLastName,
image =
Url.Content(userProfileImagePath + (string.IsNullOrEmpty(m.UserImage) ?
"NoProfileImage.png" : m.UserImage))
}).ToList()/*.Take(5)*/;
return Json(lst.ToArray(), JsonRequestBehavior.AllowGet);
}
public List<UserDet> GetList()
{
List<UserDet> list = new List<UserDet>
{
new UserDet {UserId = 1, UserImage="image1.jpg", UserScreenName = "sammy", UserFirstName = "Samantha", UserLastName = "Rocker"},
new UserDet {UserId = 2, UserImage="image2.jpg", UserScreenName = "timmy", UserFirstName = "Timothy", UserLastName = "White"},
new UserDet {UserId = 3, UserImage="image3.jpg", UserScreenName = "jenny", UserFirstName = "Jennifer", UserLastName = "Black"},
new UserDet {UserId = 4, UserImage="image4.jpg", UserScreenName = "gerry", UserFirstName = "Gerald", UserLastName = "Grover"},
new UserDet {UserId = 5, UserImage="image5.jpg", UserScreenName = "harry", UserFirstName = "Harrison", UserLastName = "Green"},
};
return list;
}
public ActionResult ProfilePage(string who)
{
throw new System.NotImplementedException();
}
}
public class UserDet
{
public int UserId { get; set; }
public string UserImage { get; set; }
public string UserScreenName { get; set; }
public string UserFirstName { get; set; }
public string UserLastName { get; set; }
}
Output:
Highlight input text
<input type="text" id="txtUserSearch" />
$(document).ready(function () {
$('#txtUserSearch').autocomplete({
source: '@Url.Action("Autocomplete", "AC5")',
minLength: 1,
select: function (event, ui) {
//alert(ui.item.label);
},
}).autocomplete("widget").addClass("whatever");
//********** 3.case
insensitive, find many occurrences and contains type **********//
$.ui.autocomplete.prototype._renderItem = function (ul, item) {
var keywords = $.trim(this.term).split(' ').join('|');
var output = item.label.replace(new RegExp("(" + keywords + ")", "gi"), '<span
class="ui-menu-item-highlight">$1</span>');
//alert(output);
return $("<li>")
.data("item.autocomplete", item)
.append($("<a>").html(output))
.appendTo(ul);
};
public class AC5Controller : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Autocomplete(string term)
{
var items = new[] { "Apple", "Pear", "Banana", "Pineapple", "Peach" };
var filteredItems = items.Where(
item =>
item.IndexOf(term, StringComparison.InvariantCultureIgnoreCase) >= 0
);
return Json(filteredItems, JsonRequestBehavior.AllowGet);
}
}
Output:
