כיצד ליצור דטליסט זה מיידי

רשימות נפתח הם דרך מסודרת מתן אופציות עבור שדה קלט, במיוחד כאשר רשימת האפשרויות הזמינות הן ארוכות. משתמש יכול לבחור את האפשרות הרצויה הקלדת שדה, או להסתכל על האפשרויות זה עשוי להיות התאמה למה שהם מחפשים. להיות מסוגל לחפש את האפשרויות, עם זאת, הוא הפתרון האידיאלי.

התנהגות זו יכולה להיות מושגת עם רכיב HTML זה מציג הצעות קלט עבור בקרות שונות, כגון תג. למרות זאת מציג רק את האפשרויות הזמינות כאשר יש למשתמש כבר הקלדת משהו לתוך שדה הקלט.

אנחנו יכולים להפוך שדה קלט יותר שמיש אם אנו מאפשרים למשתמשים לגשת לרשימה המלאה של האפשרויות בכל עת במהלך תהליך הקלט.

פוסט זה, אנחנו הולכים לראות כיצד ליצור רשימה ניתנת לחיפוש בכל עת משתמש ב תג הוא זהה ה id של ה תג - כך אנחנו לאגד אותם אחד לשני.

2. הפוך את Datalist Visible

כברירת מחדל, רכיב HTML הוא מוסתר. אנחנו יכולים לראות את זה רק כשאנחנו התחל להקליד קלט לתוך השדה שמלווה אותו דטליסט.

עם זאת יש דרך "להכריח" את התוכן של datalist (כלומר כל האפשרויות שלה) כדי להופיע בדף האינטרנט. אנחנו רק צריכים לתת לו מתאים להציג ערך הנכס חוץ מ אף אחד, לדוגמה בלוק תצוגה;.

 datalist display: block;

האפשרויות המוצגות עדיין לא ניתן לבחור בשלב זה, הדפדפן בלבד מעבד את האפשרויות הוא מוצא בתוך datalist.

כאמור, בשל ההתנהגות המובנית של אלמנט, חלק מהאפשרויות כבר מופיעות וניתנות לבחירה, אבל רק כאשר המשתמש מתחיל להקליד מחרוזת שבה הדפדפן יכול מצא אפשרות התאמה.

אנחנו גם צריכים למצוא מנגנון לעשות את כל אפשרויות (על המסך הנ"ל מוצג תחת datalist הנפתח) ניתן לבחור ב כל נקודה אחרת של תהליך הקלט - כאשר משתמשים רוצים לבדוק את האפשרויות לפני שהם סוג משהו, או בזמן שהם כבר לקחו משהו לתוך שדה קלט.

3. להביא את אלמנט HTML.

אנו נבחר את השיטה השנייה, כפי שהיא פשוטה יותר, וניתן להשתמש בה כמנגנון דחייה בדפדפנים שאינם תומכים אלמנט. כאשר דפדפן לא יכול להציג & להציג את datalist, זה מעבד את תג HTML, הקוד נראה כמו למטה:

בשילוב עם הוספת מרובים רכוש post , כך שכאשר המשתמש בוחר אפשרות מהרשימה הנפתחת, הערך שלה יוצג בתוך גם בתחום. / * כאשר המשתמש בוחר אפשרות מ DDL, לכתוב את זה לשדה הטקסט * / select.addEventListener ("שינוי", מילוי); function_input () input.value = options [this.selectedIndex]. hide_select (); חסרונות החיסרון העיקרי של טכניקה זו היא העדר דרך ישירה לסגנון אלמנט עם CSS (המראה של ו