גמלאי - תוסף השלמה אוטומטית עם
ה HTML5 אלמנט הוא די שימושי בפיתוח Frontend המודרנית. עם זאת, זה אחד מאותם גורמים כי לא מפתחים רבים יודעים על.
זה עובד על שדה קלט שבו אתה יכול autosuggest ערכים מסוימים עבור קלט. הגדרת ברירת המחדל נראית בסדר ואנחנו כבר מכוסה כמה עצות קידוד על בניית אפקטים מגניבים עם autosuggest datalists.
עם זאת, זה הרבה יותר קל לעבוד עם תוסף כמו Flexdatalist. זה תומך במגוון רחב יותר של דפדפנים ומאפשר לך להתאים אישית לחלוטין את העיצוב של datalist שלך.
לא לכל אחד יש צורך בתכונות השלמה אוטומטית ועם datalists HTML5 מקומיים, ייתכן שלא תטרח עם פלאגין. עם זאת, Flexdatalist הוא אולי הטוב ביותר שם בחוץ כי זה בונה על התנהגויות דטליסטיות ילידיות להוסיף:
- תמיכה עם תגובה לנייד
- תיאורים נוספים עבור כל פריט
- אפשרויות לבחירות מרובות בו-זמנית
- מטפלים באירועים מותאמים אישית
זה כל מופעל על ידי jQuery, אז אתה תעשה צריך עותק של הגרסה האחרונה כדי לשוב ולהציג את זה. זה גם מגיע עם סגנונות CSS משלה אשר ייתכן שתרצה לשלב בקובץ CSS יחיד כדי להפחית את בקשות HTTP.
אתה יכול למצוא הוראות התקנה מלאה בדף ההדגמה הראשי הכולל להוריד קישורים לקבצים Flexdatalist.
זה פשוט מאוד כדי להגדיר, עם רק שורה אחת של JavaScript. כברירת מחדל, הפלאגין מטרות כל תשומות עם הכיתה .גמיש, אז פשוט להוסיף את הקוד שלך צריך להיות מספיק כדי לראות תוצאות.
אתה פשוט להוסיף את רכיב בתוך שדה הקלט שלך ו- Flexdatalist מטפל בכל השאר. זה יהיה אוטומטי בסגנון הרשימה, כולל טקסט תיאורי אופציונלי.
הדרך הפשוטה ביותר להוסיף טקסט נוסף היא באמצעות קובץ JSON אשר אתה יכול צרף את הקלט שלך באמצעות מאפיין נתונים.
לדוגמה, אם תבדוק את דף ההדגמה Flexdatalist תמצא “מדינות” שדה קלט עם התכונה data-data = 'countries.json'. זה מפנה קובץ מרוחק זה מאחסן את כל נתוני הכניסה הגולמיים באופן חיצוני.
יותר מדי שדות אלה אתה יכול להאט את הדף קצת. עם זאת, אני לא יכול לדמיין אתרים רבים היו לרוץ יותר מאשר כמה טפסים אלה datalist בדף אחד, שלא לדבר אפילו עם תוסף זה jQuery, הם עדיין די מהר.
כדי להתחיל, פשוט לבקר את ריפו GitHub ולהוריד עותק. זה כולל קישור לדף ההדגמה הראשי אשר יש גם תיעוד מלא עבור ההתקנה, אפשרויות JavaScript, וכן שפע של קטעי קוד לדוגמה ללכת מסביב.
