JS AutoComplete ComboBox

AMIB AutoComplete ComboBox

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

ویژگی‌ها

  • پشتیبانی از دو ویژگی کد و متن برای هر ردیف
  • امکان نمایش کد به صورت انتخابی
  • امکان جستجوی ردیف‌ها با استفاده از کد و متن
  • تغییر ظاهر کامپوننت تنها با استفاده از شیوه‌نامه‌های 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 قرار دهید، کد ردیف انتخاب شده به طور خودکار در آن ذخیره می‌شود. برای مشاهده‌ی مثال‌های بیشتر به فایل‌های همراه بسته مراجعه کنید.

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

دریافت نگارش ۰.۲ بتا

برای دریافت آخرین نسخه از کامپوننت اینجا کلیک کنید

۲۲ دیدگاه برای JS AutoComplete ComboBox

  1. مهدی می‌گوید:

    سلام دوست عزیز
    واقعا کامپوننت بی نظیری است، من دنبال یک کامپوننت هستم که قابلیت چند بار autocomplete رو داشته باشه یعنی اینکه من وقتی تایپ کردم “آل” مثلا نام آلمان و آلبانی نمایش داده شود بعد انتخاب مثلا آلمان این متن نمایش داده شود بعد از زدن space دوباره با تایپ آل بتوانم نام آلمان و یا آلبانی را انتخاب نمود. این کار برای textarea بسیار مفید است sample های پیدا کردم ولی با فارسی سازگار نبودند http://jquery.bassistance.de/autocomplete/demo/. ممنون می شم بتونید کمکم کنید

    • امیرمسعود ایرانی می‌گوید:

      سلام

      همین کامپوننت که خودتان آدرس داده‌اید برای نیاز شما گزینه‌ی خوبی است
      با تغییر دادن css‌های آن می‌توانید جهت نمایشش را فارسی کنید
      من در مرورگر با کمک Firebug جهت را راست به چپ کردم و ظاهرا بدون مشکل کار می‌کند

  2. مهدی می‌گوید:

    ممنون دوست عزیز از جواب سریع و کامل شما
    در css مشکلی ندارم، مشکل در اینجا است که وقتی می خوام کلمات فارسی را که به صورت local درون آرایه است سرچ کنم کار نمی کند، خیلی تهم با جاوا اسکریپتش ور رفتم نشد.
    یا به این مثال نگاه کنید http://www.javaxp.com/2009/03/javascript-simple-autocomplete-textbox.html یک آرایه customarray دارد اگر در انجا یک کلمه فارسی نوشته شود سرچ کار نمی کند.
    ممنون

  3. مهدی می‌گوید:

    فهمیدم چشه :-)
    باید صفحه utf-8 باشه،
    و من به این مسئله دقت نمی کردم
    ممنون از شما

  4. سمیرا می‌گوید:

    با تشکر از شما که نتیجه تلاش و صرف وقتتون رو در اختیار همه قرار دادین

    استفاده از این کامپوننت سرعت رو کاهش نمیده ؟

    • امیرمسعود ایرانی می‌گوید:

      با سلام
      استفاده از هر کامپوننتی به جای عنصرهای اصلی مرورگر، کارایی را کاهش می‌دهد
      ولی هنگامی که به یک ویژگی خاص نیاز باشد، چاره‌ای جز استفاده از کامپوننت‌ها نیست
      این کامپوننت بسیار بهینه و کم حجم است و می‌توانید مطمئن باشید، حداقل بار ممکن را چه از نظر حجم و چه از نظر پردازش بر مشتری بار می‌کند

  5. سمیرا می‌گوید:

    آیا میشه این کامپوننت و تغییر داد برای اینکه چند تا انتخاب داشته باشه و حالت کامبو نداشته باشه ؟ البته سوال اولی که تو همین صفحه پرسیده شده هم همین هست ولی میخوام ببینم میشه با تغییرات کمی همین کامپوننت رو کامل کرد؟ با این کار کاملتر میشه و کارایی بیشتری پیدا میکنه

    • امیرمسعود ایرانی می‌گوید:

      با سلام
      این کامپوننت برای کار مورد نظر طراحی نشده است و تغییر آن برای چند انتخابی شدن کار زیادی می‌برد
      اگر به جاوااسکریپت مسلط باشید، می‌توانم کد فشرده نشده را برایتان بفرستم تا آن را تغییر بدهید
      ولی اگر در این کار تجربه نداشته باشید، زمان زیادی از شما خواهد گرفت
      با سپاس

  6. سمیرا می‌گوید:

    سلام
    طرح برنامه من به شکلی تغییر کرد که همین کامپوننت جوابگو هست
    با اجازتون میخوام از این کامپوننت توی برنامه خودم استفاده کنم از نظر شما مشکلی نداره ؟

    در ضمن انتخاب با صفحه کلید مشکلی نداره ولی انتخاب با ماوس انجام نمیشه!
    این مساله قابل برطرف شدن هست ؟

    • امیرمسعود ایرانی می‌گوید:

      با سلام
      انتخاب با ماوس هم نباید مشکلی داشته باشد
      لطفا بررسی کنید اگر در مثال همراه بسته می‌توانید از ماوس استفاده کنید مشکل جایی در کدهای شما یا مرورگرتان است
      اگر نمونه‌ی آنلاینی از اشکال وجود دارد لطفا آن را برایم بفرستید
      با سپاس

  7. سمیرا می‌گوید:

    متشکرم
    مشکل حل شد.

  8. حامد می‌گوید:

    عالی بود. ممنون

  9. حامد می‌گوید:

    با سلام
    از این برنامه در پروژم استفاده کردم خیلی خوب بود اما متاسفانه در زمان تحویل روی تبلت کار نکرد.
    میدونید علتش چیه؟
    با تشکر

    • امیرمسعود ایرانی می‌گوید:

      با سلام

      لطفا نوع تبلت و نوع مرورگر و نوع خطایی که ایجاد شده رو به ایمیل بنده amibct در gmail ارسال بفرمایید
      تا در صورت امکان بررسی‌ش کنم

  10. صادق می‌گوید:

    با سلام

    می خواستم بدونم اگر قرار باشه از سمت سرور دیتاهای تکست باکس پر بشه
    چطوری میشه مقداری را قبل Select شده کرد که دقیقا همون سطر انتخاب بشه

    باتشکر

    • امیرمسعود ایرانی می‌گوید:

      با سلام

      برای این کار کافیه که متن همون ردیف رو در input موردنظر قرار بدید
      این کامپوننت ویژگی‌هایی به input معمولی اضافه می‌کنه

  11. sara می‌گوید:

    سلام
    کار با ماوس درست انجام نمیشه
    بعضی وقتا انتخاب میشه بیشتر وقتا نه!
    تو مثال دانلود شده هم مشکل وجود داره
    مرور گر من کروم آپدیت شده است
    لطفا راهنمایی کنین ممنونم

    • امیرمسعود ایرانی می‌گوید:

      سلام

      روی آخرین نگارش کروم تست کردم ظاهرا مشکلی وجود ندارد. لطفا توضیحات دقیق‌تری از طریق ایمیل ارسال کنید تا علت مشکل احتمالی پیدا و برطرف شود.
      amibct در gmail
      با تشکر

  12. موسی الرضا شریفی می‌گوید:

    سلام دوست عزیز ممنون بابت کامپوننت کهدر اختیار دوستان گزاشتی . من می خوام این کومبوبوکس از داخل بانک اطلاعاتی ام پر بشه میشه راهنمایی کنید باید چی کار کنم.

    • امیرمسعود ایرانی می‌گوید:

      با سلام و تشکر
      برای پر کردن کمبوباکس از بانک اطلاعاتی لازمه که اطلاعات رو با استفاده از یک زبان سمت سرور مثل php یا ASP.net از بانک اطلاعاتی بخونید و با فرمت مناسب در صفحه قرار بدید
      لازم به ذکر است که این کامپوننت برای یک کاربرد خاص توسعه پیدا کرده و اگر اهدافی مثل Ajax یا امکانات پیشرفته‌تر نیاز داشته باشید باید از کتابخانه‌های دیگر کمک بگیرید.
      با سپاس

  13. موسی الرضا شریفی می‌گوید:

    ممنون جناب ایرانی شرمنده من یه خورده مبتدی هستم و با asp.net دارم کار می کنم الان تو قسمتی
    divPickerClassName: “ac_picker” برای فهرست خودکار خروجی کلاس ac_piker چیه ?

    • امیرمسعود ایرانی می‌گوید:

      پارامتر آخر مربوط به تنظیمات اضافی هست که اگر نیازی بهشون ندارید لازم نیست بهشون مقدار بدید
      این گزینه برای تنظیم نام کلاس پنجره‌ای هست که وقتی کاربر شروع به تایپ می‌کنه باز می‌شه و لیست مقادیر رو نشان می‌ده.

پاسخ دادن به مهدی لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

شما می‌توانید از این دستورات HTML استفاده کنید: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>