ساخت DropDownList با امکان جستجو لحظه ای

[jaykob]

سلام و احترام



من یک DropDownList از روی یکی از جداولم رندر می کنم که حدود ۹ هزار آیتم دارد و خوب به طبع نیاز دارم که کاربر به صورت لحظه ای و با تایپ چند کلمه از مورد دلخواه خود گزینه ها فیلتر شوند . اول از Chosen استفاده کردم اما با جستجو در کلمات فارسی مشکل داره و روی این تعداد آیتم جواب نداد ممنون می شم یک راهکار خوب و پایدار به من معرفی کنید

با تشکر

[parsdarab]

من از autoComplete استفاده میکنم
نمیدونم روی 9هزار تا رکورد جواب میده یا نه
اگه میخای تا توضیحات تکمیلی بزارم

[amir_shokri]

سلام

من خودم ار این استفاده می کنم :
http://silviomoreto.github.io/bootstrap-select/

[jaykob]

من از autoComplete استفاده میکنم
نمیدونم روی 9هزار تا رکورد جواب میده یا نه
اگه میخای تا توضیحات تکمیلی بزارم

سلام

تشکر از شما . بله لطفا توضیحات تکمیلی رو قرار بدید تا من روی این رکورد ها تست کنم

ممنون

[parsdarab]

خوب این کد سمت سرور میتونه باشه
که به صورت 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]

واسه کد سمت کلاینت اول باید فایل 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]

لینک آموزشی

https://jqueryui.com/autocomplete/#remote-jsonp