View Full Version : سوال: ساخت DropDownList با امکان جستجو لحظه ای
jaykob
سه شنبه 25 آبان 1395, 17:58 عصر
سلام و احترام
من یک DropDownList از روی یکی از جداولم رندر می کنم که حدود ۹ هزار آیتم دارد و خوب به طبع نیاز دارم که کاربر به صورت لحظه ای و با تایپ چند کلمه از مورد دلخواه خود گزینه ها فیلتر شوند . اول از Chosen استفاده کردم اما با جستجو در کلمات فارسی مشکل داره و روی این تعداد آیتم جواب نداد ممنون می شم یک راهکار خوب و پایدار به من معرفی کنید
با تشکر
parsdarab
سه شنبه 25 آبان 1395, 20:25 عصر
من از autoComplete استفاده میکنم
نمیدونم روی 9هزار تا رکورد جواب میده یا نه
اگه میخای تا توضیحات تکمیلی بزارم
amir_shokri
سه شنبه 25 آبان 1395, 20:35 عصر
سلام
من خودم ار این استفاده می کنم :
http://silviomoreto.github.io/bootstrap-select/
jaykob
چهارشنبه 26 آبان 1395, 07:52 صبح
من از autoComplete استفاده میکنم
نمیدونم روی 9هزار تا رکورد جواب میده یا نه
اگه میخای تا توضیحات تکمیلی بزارم
سلام
تشکر از شما . بله لطفا توضیحات تکمیلی رو قرار بدید تا من روی این رکورد ها تست کنم
ممنون
parsdarab
چهارشنبه 26 آبان 1395, 14:04 عصر
خوب این کد سمت سرور میتونه باشه
که به صورت json مقدار بر میگردونه.
public JsonResult AutoCompleteJob(string term = "") {
var models = _jobService.Base_GetAll(x => x.Caption.Contains(term)).ToList();
var result = (from r in models
select new { r.Caption, r.Id }).Distinct();
return Json(result, JsonRequestBehavior.AllowGet);
}
parsdarab
چهارشنبه 26 آبان 1395, 14:16 عصر
واسه کد سمت کلاینت اول باید فایل jquery , jquery UI را اضافه کنی
دو تا input میزاری تو فرم یکی برای اینکه کاربر مقدارها رو انتخاب کنه و یکی هم برای انتخاب id رکورد
<input type="hidden" name='@_name' id='@_id' value="@_defaultId" class="@_defaultClass" />
<input type="text" class="form-control" name='@idStr' id='@idStr' value="@_defaultStr" placeholder="نام را جست و جو کنید..." />
این کد جاوا اسکریپ زیر هم اضافه کنید
<script type="text/javascript">
$(document).ready(function () {
$('#' + '@idStr').autocomplete({
source: function (request, response) {
$.ajax({
url: '@_url',
type: "POST",
dataType: "json",
data: { term: request.term },
success: function (data) {
response($.map(data, function (item) {
//نمایش اطلاعات دریافتی از سرور
return { id: item.Id, label: item.Caption, value: item.Caption };
}));
}
});
},
select: function (event, ui) {
//debugger;
//بعد از اینکه کاربر داده مورد نظر رو انتخاب کرد این رویداد صدا زده می شود
$('#' + '@_id').val(ui.item.id);
},
});
//ممکن است کاربر مقداری را انتخاب کند
//بعد انرا ثبت کند و مقدار را پاک کند
//وقتی مقدار پاک می شود مقدار کد قبلی هنوز پاک نشده است
$('#' + '@idStr').change(function () { $('#' + '@_id').val(''); });
//با کد بالا پاکسازی انجام می شود
//http://output.jsbin.com/uciriq/4/
//نمایش لیست ایتم ها وقتی مودال باز می شود
//$('#' + '@idStr').autocomplete("widget").insertAfter($("#div-modal1").parent());
//چون ممکن است بخواهیم از چندین فرم همزمان استفاده کنیم
//فقط اگر هر دو فرم همزمان باز باشند و کاربر بخواهد با هر دو فرم کار کند اوتو کامچلیت یکی کار میکند
$('#' + '@idStr').autocomplete("widget").insertAfter($(".ui-dialog-content").parent());
});
</script>
برای حروف فارسی هم کاملا ساپورت میکنه
parsdarab
چهارشنبه 26 آبان 1395, 14:17 عصر
لینک آموزشی
https://jqueryui.com/autocomplete/#remote-jsonp
vBulletin® v4.2.5, Copyright ©2000-1403, Jelsoft Enterprises Ltd.