لیست قابل جستجو

در بسیاری از مواقع، ما لیست یا درختواره ای داریم و نیاز به فیلتر کردن بر اساس یک کلمه خاص داریم، با استفاده از این موضوع میتوانیم، بر روی لیست یا درختواره مد نظر، اعمال فیلتر کنیم.

قبلا در قسمت فیلتر مشابه این موضوع را پیاده سازی کرده ایم. حال میخواهیم موضوعی پیش رفته تر را با استفاده از آن خاصیت نمایش دهیم.

نمایش لیست

LTR

First Name
Last Name
Company
Address
City
Country
State/Province
ZIP/Postal Code
Phone 1
Phone 2
Email
Web

First Name
Last Name
Company
Address
City
Country
State/Province
ZIP/Postal Code
Phone 1
Phone 2
Email
Web

RTL

نام
نام خانوادگی
شرکت
آدرس
شهر
کشور
استان
کد پستی
تلفن 1
تلفن 2
پست الکترونیک
آدرس وب

نام
نام خانوادگی
شرکت
آدرس
شهر
کشور
استان
کد پستی
تلفن 1
تلفن 2
پست الکترونیک
آدرس وب

نمایش درختواره

LTR

Personal Info
- Name
  - First Name
  - Last Name
- Address
  - Address
  - City
  - Country
  - State/Province
  - ZIP/Postal Code
Job Info
- Company
- Phone 1
- Phone 2
- Email
- Web

RTL

اطلاعات شخصی
- نام
  - نام
  - نام خانوادگی
- آدرس
  - آدرس
  - شهر
  - کشور
  - استان
  - کدپستی
اطلاعات شغلی
- شرکت
- تلفن 1
- تلفن 2
- پست الکترونیک
- وب

انتخاب مقادیر

LTR

First Name
Last Name
Company
Address
City
Country
State/Province
ZIP/Postal Code
Phone 1
Phone 2
Email
Web

Personal Info
- Name
  - First Name
  - Last Name
- Address
  - Address
  - City
  - Country
  - State/Province
  - ZIP/Postal Code
Job Info
- Company
- Phone 1
- Phone 2
- Email
- Web

RTL

نام
نام خانوادگی
شرکت
آدرس
شهر
کشور
استان
کد پستی
تلفن 1
تلفن 2
پست الکترونیک
آدرس وب

اطلاعات شخصی
- نام
  - نام
  - نام خانوادگی
- آدرس
  - آدرس
  - شهر
  - کشور
  - استان
  - کدپستی
اطلاعات شغلی
- شرکت
- تلفن 1
- تلفن 2
- پست الکترونیک
- وب

خصوصیات

search-id

بطور خودکار اولین input که از نوع search باشد انتخاب میشود، ولیکن اگر تمایل دارید نوعی دیگر برای ورودی جستجو انتخاب شود، ID آنرا وارد کنید.

list-id

اگر لیست مد نظر دقیقا پس از ورودی جستجو نیست، میتوانید ID آنرا در این خصوصیت معرفی کنید.

display-id

اگر میخواهید بعد از انتخاب گزینه ای در لیست عنوان آنرا در المنتی نمایش دهید، ID آنرا بنویسید.

value-id

اگر میخواهید بعد از انتخاب گزینه ای در لیست مقدار آنرا در المنتی نمایش دهید، ID آنرا بنویسید.

min-length

اگر میخواهید بعد از ورودی حداقل تعدادی کاراکتر عملیات فیلتر کردن انجام شود، آن تعداد را مشخص کنید.

توابع و خصوصیات جاوا اسکریپت

list

با توجه به استفاده شما، این موضوع اشاره به کلاس لیست یا درختواره دارد. که از طریق آن میتوانید عملیاتهای مختلف را انجام دهید. برای مثال، دیتا بدید، یا تیک بزنید و یا گزینه ای حذف و ... کنید.

listElement

دقیقا به المنت لیست اشاره داره و میتونید تگ های html یا ... را مقدار دهی کنید.

minLength

برابر خصوصیت min-length است.

رخدادها

beforeFilterChanged

قبل از اینکه فیلتر عملیات فیلتر کردن را آغاز کند این رخداد فراخوانی میشود. اگر این تابع مقدار false برگرداند، عملیات فیلتر کردن لغو میشود.
برای مثال شما میخواهید به صورت پویا دیتای فیلتر کردن را از سرور بگیرید، در این رخداد دیتای جدید را خوانده و به لیست خود نسبت میدهد. سپس این تابع را با مقدار false برمیگردانید تا ادامه عملیات متوقف شود.
این تابع را با خصوصیت خطی onbeforefilterchanged نیز میتوانید مقدار دهی کنید.

afterFilterChanged

بعد از آنکه عملیات فیلتر کردن تمام شد، این رخداد فراخوانی میشود.
این تابع را با خصوصیت خطی onafterfilterchanged نیز میتوانید مقدار دهی کنید.

selectionChanged

زمانیکه انتخاب در لیست تغییر کرد این رخداد فراخوانی میشود.
این تابع را با خصوصیت خطی onselectionchanged نیز میتوانید مقدار دهی کنید.

مثال پویا

برای مدیریت لیست یا درختواره خود، به مثالهای مرتبط با آنها در صفحات خود در درختواره و لیست مراجعه نمایید.

در زیر یک مثال ساده از نحوه استفاده از لیست آورده شده است

First Name
Last Name
Company
Address
City
Country
State/Province
ZIP/Postal Code
Phone 1
Phone 2
Email
Web

دریافت اطلاعات از سرور

برای دریافت اطلاعات از سرور، رخداد onbeforefilterchanged در قسمت خصوصیات تگ و یا رخداد beforeFilterChanged را مقدار دهی کنید. تا زمانیکه عبارتی تایپ میشود، این تابع فراخوانی شود.
سپس بر اساس، موارد مندرج در مثال زیر و مشخصات این رخداد، اقدام به پر کردن لیست خود کنید.