پلاگین جستجو با jquery و twitter bootstrap
نویسنده: ایلیا اکبری فرد
تاریخ: ۱۳۹۲/۰۳/۲۹ ۲۱:۳۵
آدرس: www.dntips.ir
| مطالب | ۳۶۹۴ |
| نویسندگان | ۲۷۶ |
| گروههای مطالب | ۱۰۲۴ |
| نقشههای راه | ۱۱۹ |
| دورهها | ۱۴ |
| اشتراکها | ۱۷۹۱۴ |
<link rel="stylesheet" href="@Url.Content("~/Content/bootstrap-rtl.css")" type="text/css" />
<script type="text/javascript" src="@Url.Content("~/scripts/jquery-2.0.2.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/scripts/jquery-ui-1.10.3.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/scripts/bootstrap-rtl.js")"></script>
<script type="text/javascript" src="@Url.Content("~/scripts/searchboxmvc.js")"></script> [HttpPost]
public virtual ActionResult LoadData(string fieldName, string value, string stringFilterMode = "startWith")
{
Thread.Sleep(2000);
var models = MakePersons();
if (fieldName == "Id")
{
models = models.Where(p => p.Id == int.Parse(value)).Take(1).ToList();
}
else if (fieldName == "FirstName")
{
models = models.Where(p => p.FirstName.StartsWith(value)).ToList();
}
return Json(new { Status = "OK", Records = models });
}
private List<Person> MakePersons()
{
var lst = new List<Person>();
lst.Add(new Person() { Id = 1, Code = "Uytffs-098", FirstName = "احمدرضا", LastName = "عابدزاده" });
lst.Add(new Person() { Id = 2, Code = "fTuuuw-652", FirstName = "کریم", LastName = "باقری" });
lst.Add(new Person() { Id = 3, Code = "Lopapo-123", FirstName = "خداداد", LastName = "عزیزی" });
lst.Add(new Person() { Id = 4, Code = "Utppq-981", FirstName = "علی", LastName = "دایی" });
lst.Add(new Person() { Id = 5, Code = "zttsn-471", FirstName = "علی", LastName = "کریمی" });
lst.Add(new Person() { Id = 6, Code = "poiud-901", FirstName = "مهدی", LastName = "مهدوی کیا" });
lst.Add(new Person() { Id = 7, Code = "wqrPoP-391", FirstName = "علیرضا", LastName = "منصوریان" });
return lst;
}...
<div id="div_SearchBoxContainer">
</div>
...
@section scripts{
<script type="text/javascript">
$("#div_SearchBoxContainer").searchboxmvc({
loadUrl: '@Url.Action(actionName: "LoadData", controllerName: "Home")',
defaultStringFilterMode: "startWith",
loadDataOnLeave: true,
displayClass: "",
displayNoResultClass: "",
display: function (element, record) {
$(element).html(record.FirstName + " " + record.LastName);
},
listItemsDisplay: function (element, record, index) {
return record.LastName + " " + record.FirstName + "(" + record.Code + ")";
},
fields: [
{
fieldName: "Id",
fieldTitle: "شناسه",
width: 100,
defaultValueField: true
},
{
fieldName: "FirstName",
fieldTitle: "نام",
width: 200,
defaultDisplayField: true,
filter: true,
isStringType: true
},
{
fieldName: "LastName",
fieldTitle: "نام خانوادگی",
filter: false,
isStringType: true
}
]
});
</script>
}