ایجاد نرم‌افزارهای پیشرفته‌ی تحت وب با توجه به تنوع کم در کامپوننت‌های قابل استفاده کاری دشوار است. در ادامه‌ی ایجاد کامپوننت‌هایی برای ساده‌تر کردن توسعه‌ی ابزارهای تحت وب، این کامپوننت را که از پیشرفته‌ترین موارد در نوع خود است، آماده کردم.
ویژگی‌ها
- پشتیبانی از دو ویژگی کد و متن برای هر ردیف
- امکان نمایش کد به صورت انتخابی
- امکان جستجوی ردیف‌ها با استفاده از کد و متن
- تغییر ظاهر کامپوننت تنها با استفاده از شیوه‌نامه‌های CSS
- سازگاری با تمامی مرورگرهای مدرن و متداول
- سازگاری بالا با زبان فارسی
- امکان انتخاب با ماوس و صفحه کلید
- امکان وارد کردن کد یا متن و تشخیص خودکار ردیف موردنظر
- تعریف ردیف‌ها با کمک اشیای JSON
- امکان معرفی استفاده از چندین کامپوننت در یک صفحه با تنظیمات مختلف
- استفاده‌ی آسان
- حجم سرآمد کمتر از ۱۰ کیلوبایت
- کدنویسی بهینه و مطابق آخرین استانداردهای جاوااسکریپت
- سازگار با آخرین استانداردهای html5
روش استفاده
دو فایل اسکریپت و شیوه‌نامه‌ی کمبوباکس را در سرآمد فایل HTML خود قرار دهید:
<script src="amib-ac.min.js"></script> <link rel="stylesheet" href="ac.css" /> |
یک فیلد متنی به شکل زیر در محل دلخواه قرار دهید:
<input id="ac1" class="ac_picker" type="text" /> |
پیش از پایان تگ body یک تگ اسکریپت ایجاد کنید و محتوای زیر را درون آن قرار دهید:
<script> var test_list = new Array( { c: "1020", t: "عنوان دلخواه" }, { c: "1021", t: "عنوان دلخواه دوم" } // ... ); var objAC1 = new AMIB.autoComplete( 'objAC1', 'ac1', test_list ); </script> |
ارسال نام شیء تعیین شده در مقابل var به عنوان پارامتر اول الزامی است
پارامتر دوم شناسه‌ی input موردنظر برای تبدیل شدن به AutoComplete ComboBox است
پارامتر سوم نام شیء JSON است که برای خواندن ردیف‌ها مورد استفاده قرار می‌گیرد.
همان‌گونه که در مثال مشاهده می‌کنید، ردیف‌ها با شیئی از نوع JSON به کامپوننت ارسال می‌شوند.
مشخص کردن کد برای ردیف‌ها اختیاری است:
var test_list = new Array( { t: "عنوان دلخواه" }, { t: "عنوان دلخواه دوم" } // ... ); |
علاوه بر پارامترهای اجباری، پارامتر چهارم که اختیاری است به تغییر تنظیمات اختصاص دارد. تنظیمات با فرمت JSON به تابع سازنده ارسال می‌شوند. موارد قابل تغییر و مقدار پیش‌فرض آن‌ها به شرح زیر است:
var options = { divPickerClassName: "ac_picker", // تعیین نام کلاس برای فهرست خودکار show_code: true, // نمایش کد در صورت وجود codeInputID: '' // شناسه‌ی فیلد اضافی برای ذخیره‌ی کد ردیف انتخابی }; var objAC1 = new AMIB.autoComplete( 'objAC1', 'ac1', test_list, options ); |
در صورتی که شناسه‌ی یک input را در codeInputID قرار دهید، کد ردیف انتخاب شده به طور خودکار در آن ذخیره می‌شود. برای مشاهده‌ی مثال‌های بیشتر به فایل‌های همراه بسته مراجعه کنید.
این کامپوننت در مراحل نخستین توسعه قرار دارد. لطفا در صورت مشاهده‌ی هرگونه اشکال یا در صورت داشتن پیشنهادی برای بهبود این کامپوننت آن را برایم بفرستید.
سلام دوست عزیز
واقعا کامپوننت بی نظیری است، من دنبال یک کامپوننت هستم که قابلیت چند بار autocomplete رو داشته باشه یعنی اینکه من وقتی تایپ کردم “آل” مثلا نام آلمان و آلبانی نمایش داده شود بعد انتخاب مثلا آلمان این متن نمایش داده شود بعد از زدن space دوباره با تایپ آل بتوانم نام آلمان و یا آلبانی را انتخاب نمود. این کار برای textarea بسیار مفید است sample های پیدا کردم ولی با فارسی سازگار نبودند http://jquery.bassistance.de/autocomplete/demo/. ممنون می شم بتونید کمکم کنید
سلام
همین کامپوننت که خودتان آدرس داده‌اید برای نیاز شما گزینه‌ی خوبی است
با تغییر دادن cssهای آن می‌توانید جهت نمایشش را فارسی کنید
من در مرورگر با کمک Firebug جهت را راست به چپ کردم و ظاهرا بدون مشکل کار می‌کند
ممنون دوست عزیز از جواب سریع و کامل شما
در css مشکلی ندارم، مشکل در اینجا است که وقتی می خوام کلمات فارسی را که به صورت local درون آرایه است سرچ کنم کار نمی کند، خیلی تهم با جاوا اسکریپتش ور رفتم نشد.
یا به این مثال نگاه کنید http://www.javaxp.com/2009/03/javascript-simple-autocomplete-textbox.html یک آرایه customarray دارد اگر در انجا یک کلمه فارسی نوشته شود سرچ کار نمی کند.
ممنون
فهمیدم چشه
باید صفحه utf-8 باشه،
و من به این مسئله دقت نمی کردم
ممنون از شما
با تشکر از شما که نتیجه تلاش و صرف وقتتون رو در اختیار همه قرار دادین
استفاده از این کامپوننت سرعت رو کاهش نمیده ؟
با سلام
استفاده از هر کامپوننتی به جای عنصرهای اصلی مرورگر، کارایی را کاهش می‌دهد
ولی هنگامی که به یک ویژگی خاص نیاز باشد، چاره‌ای جز استفاده از کامپوننت‌ها نیست
این کامپوننت بسیار بهینه و کم حجم است و می‌توانید مطمئن باشید، حداقل بار ممکن را چه از نظر حجم و چه از نظر پردازش بر مشتری بار می‌کند
آیا میشه این کامپوننت و تغییر داد برای اینکه چند تا انتخاب داشته باشه و حالت کامبو نداشته باشه ؟ البته سوال اولی که تو همین صفحه پرسیده شده هم همین هست ولی میخوام ببینم میشه با تغییرات کمی همین کامپوننت رو کامل کرد؟ با این کار کاملتر میشه و کارایی بیشتری پیدا میکنه
با سلام
این کامپوننت برای کار مورد نظر طراحی نشده است و تغییر آن برای چند انتخابی شدن کار زیادی می‌برد
اگر به جاوااسکریپت مسلط باشید، می‌توانم کد فشرده نشده را برایتان بفرستم تا آن را تغییر بدهید
ولی اگر در این کار تجربه نداشته باشید، زمان زیادی از شما خواهد گرفت
با سپاس
سلام
طرح برنامه من به شکلی تغییر کرد که همین کامپوننت جوابگو هست
با اجازتون میخوام از این کامپوننت توی برنامه خودم استفاده کنم از نظر شما مشکلی نداره ؟
در ضمن انتخاب با صفحه کلید مشکلی نداره ولی انتخاب با ماوس انجام نمیشه!
این مساله قابل برطرف شدن هست ؟
با سلام
انتخاب با ماوس هم نباید مشکلی داشته باشد
لطفا بررسی کنید اگر در مثال همراه بسته می‌توانید از ماوس استفاده کنید مشکل جایی در کدهای شما یا مرورگرتان است
اگر نمونه‌ی آنلاینی از اشکال وجود دارد لطفا آن را برایم بفرستید
با سپاس
متشکرم
مشکل حل شد.
عالی بود. ممنون
با سلام
از این برنامه در پروژم استفاده کردم خیلی خوب بود اما متاسفانه در زمان تحویل روی تبلت کار نکرد.
میدونید علتش چیه؟
با تشکر
با سلام
لطفا نوع تبلت و نوع مرورگر و نوع خطایی که ایجاد شده رو به ایمیل بنده amibct در gmail ارسال بفرمایید
تا در صورت امکان بررسی‌ش کنم
با سلام
می خواستم بدونم اگر قرار باشه از سمت سرور دیتاهای تکست باکس پر بشه
چطوری میشه مقداری را قبل Select شده کرد که دقیقا همون سطر انتخاب بشه
باتشکر
با سلام
برای این کار کافیه که متن همون ردیف رو در input موردنظر قرار بدید
این کامپوننت ویژگی‌هایی به input معمولی اضافه میکنه
سلام
کار با ماوس درست انجام نمیشه
بعضی وقتا انتخاب میشه بیشتر وقتا نه!
تو مثال دانلود شده هم مشکل وجود داره
مرور گر من کروم آپدیت شده است
لطفا راهنمایی کنین ممنونم
سلام
روی آخرین نگارش کروم تست کردم ظاهرا مشکلی وجود ندارد. لطفا توضیحات دقیق‌تری از طریق ایمیل ارسال کنید تا علت مشکل احتمالی پیدا و برطرف شود.
amibct در gmail
با تشکر
سلام دوست عزیز ممنون بابت کامپوننت کهدر اختیار دوستان گزاشتی . من می خوام این کومبوبوکس از داخل بانک اطلاعاتی ام پر بشه میشه راهنمایی کنید باید چی کار کنم.
با سلام و تشکر
برای پر کردن کمبوباکس از بانک اطلاعاتی لازمه که اطلاعات رو با استفاده از یک زبان سمت سرور مثل php یا ASP.net از بانک اطلاعاتی بخونید و با فرمت مناسب در صفحه قرار بدید
لازم به ذکر است که این کامپوننت برای یک کاربرد خاص توسعه پیدا کرده و اگر اهدافی مثل Ajax یا امکانات پیشرفته‌تر نیاز داشته باشید باید از کتابخانه‌های دیگر کمک بگیرید.
با سپاس
ممنون جناب ایرانی شرمنده من یه خورده مبتدی هستم و با asp.net دارم کار می کنم الان تو قسمتی
divPickerClassName: “ac_picker” برای فهرست خودکار خروجی کلاس ac_piker چیه ?
پارامتر آخر مربوط به تنظیمات اضافی هست که اگر نیازی بهشون ندارید لازم نیست بهشون مقدار بدید
این گزینه برای تنظیم نام کلاس پنجره‌ای هست که وقتی کاربر شروع به تایپ میکنه باز میشه و لیست مقادیر رو نشان می‌ده.