שליטות אוטוקולם קלות משקל עם רשימת נתונים HTML5

בדרכה זו, נצלול עמוקות לתוך האלמנט <datalist> הבסיסי ב-HTML5 שלא משמש לעתים קרובות. הוא יכול ליישם בקרה של צורך מלאכותי קליל, נגיש, ומהדרין עבור צורך מלאכותי שאינו זקוק ל-JavaScript.

מה לא בסדר עם <select>?

בקרות HTML5 <select> הם אידאליים כשאתה רוצה שהמשתמש יבחר מטווח קטן של אפשרויות. הם פחות מעשיים כש:

• יש הרבה אפשרויות, כמו מדינות או כותבי כותבים
• המשתמש רוצה להזין את האפשרות שלהם שאינה ברשימה

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

<select> יקפוץ למיקום הנכון כשאתה מתחיל להקליד, אך זה לא תמיד ברור. זה לא יעבוד על כל המכשירים (כמו מסכי תפיץ), וזה מאופס תוך שנייה או שתיים.

מפתחים מפנים לאחת מהרבים מופעל על ידי JavaScript פתרונות, אך בקרת אוטומטי מותאם אישית אינה תמיד הכרחית. אלמנט HTML5 <datalist> הוא קליל, נגיש, ואין לו תלות ב-JavaScript. אולי שמעת שהוא באגי או חסר תמיכה. זה לא נכון ב-2021, אך יש ספקות וחריגים בדפדפנים.

<datalist> התחלה מהירה

בחירת המדינה מרשימה הכוללת יותר מ-200 אפשרות היא מועמדת מושלמת לבקרת אוטומטיות. הגדר <datalist> עם ילדים <option> אלמנטים לכל מדינה ישירות בדף HTML:

<datalist id="countrydata">
  <option>Afghanistan</option>
  <option>Åland Islands</option>
  <option>Albania</option>
  <option>Algeria</option>
  <option>American Samoa</option>
  <option>Andorra</option>
  <option>Angola</option>
  <option>Anguilla</option>
  <option>Antarctica</option>
  ...etc...
</datalist>

ה-datalist של id יכול להיקרא לפי תכונה list בכל <input> שדה:

<label for="country">country</label>

<input type="text"
  list="countrydata"
  id="country" name="country"
  size="50"
  autocomplete="off" />

באופן מבלבל, עדיף להגדיר autocomplete="off". זה מבטיח שהמשתמש יוצג ערכים ב<datalist> אך לא ערכים שהם קודם כבר נכנסו בדפדפן.

התוצאה:

זו היישום הברירת מחדל ב-Microsoft Edge. יישומים אחרים מיישמים פונקציונליות דומה, אך המראה משתנה בין רשתות ודפדפנים.

<option> אפשרויות

שימוש בתווית כילד טקסט של <option> הוא נפוץ:

<datalist id="mylist">
  <option>label one</option>
  <option>label two</option>
  <option>label three</option>
</datalist>

שימוש בתכונה value משפיע תוצאות זהות:

<datalist id="mylist">
  <option value="label one" />
  <option value="label two" />
  <option value="label three" />
</datalist>

הערה: הקצה /> החרסון אופציונלי ב-HTML5, אם כי זה יכול לעזור למנוע טעויות קידוד.

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

אפשרות 1:

<datalist id="mylist">
  <option value="1">label one</option>
  <option value="2">label two</option>
  <option value="3">label three</option>
</datalist>

אפשרות 2:

<datalist id="mylist">
  <option value="1" label="label one" />
  <option value="2" label="label two" />
  <option value="3" label="label three" />
</datalist>

בשני המקרים, השדה הקלטה מוגדר ל-1, 2 או 3 כאשר אפשרות תקפה נבחרה, אך הממשק המשתנה בין דפדפנים:

• Chrome מציג רשימה עם הערך והתווית. רק הערך נשאר לאחר שנבחר אפשרות.
• Firefox מציג רשימה עם התווית בלבד. הוא עובר לערך פעם אחת שנבחרת אפשרות.
• Edge מציג את הערך בלבד.

הדוגמה של CodePen הבאה מציגה את כל הגרסאות:

ראה את הפנ של
דוגמאות אוטומטיות של HTML5 <datalist> על ידי SitePoint (@SitePoint)
ב-CodePen.

היישומים יתפתחו אך, לעת עתה, הייתי ממליץ לך לא להשתמש בערך ותווית מאחר שסביר שזה יבלבל משתמשים. (נתונה פיתרון מתוכנן למטה.)

<datalist> תמיכה בדפדפן ופחותיות

האלמנט <datalist> נתמך היטב בדפדפנים מודרניים כמו גם ב-Internet Explorer 10 ו-11:

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

אם אתה חייב בהחלט לתמוך ב-IE9 ולמטה, יש דפוס פחותיות שמשתמש ב-<select> סטנדרטי במקביל לקלטת טקסט כאשר <datalist> נכשל. מתאים את דוגמת המדינה:

<label for="country">country</label>

<datalist id="countrydata">

  <select name="countryselect">
    <option></option>
    <option>Afghanistan</option>
    <option>Åland Islands</option>
    <option>Albania</option>
    <option>Algeria</option>
    <option>American Samoa</option>
    <option>Andorra</option>
    <option>Angola</option>
    <option>Anguilla</option>
    <option>Antarctica</option>
    ...etc...
  </select>

  <label for="country">or other</label>

</datalist>

<input type="text"
  id="country" name="country"
  size="50"
  list="countrydata"
  autocomplete="off" />

ראה את הפסקטציה
HTML5 <datalist> autocomplete fallback על ידי SitePoint (@SitePoint)
ב- CodePen.

בדפדפנים מודרניים, אלמנטים ה- <option> הופכים לחלק מה- <datalist> והתווית “או אחרת” אינה מוצגת. זה נראה זהה ל- דוגמה לעיל, אך ערך הטופס countryselect יוגדר למחרוזת ריקה.

ב- IE9 ולמטה, גם ה- <select> (ארוך מאוד) ושדות הקלט הטקסטי פעילים:

שני הערכים יכלו להיכנס ב- IE ישנים. היישום שלך חייב או:

• להחליט מהו הנכון ביותר, או
• להשתמש בפונקציה קטנה של JavaScript לאפס אחד כשהשני משתנה

שימוש ב- <datalist> בבקרות לא טקסטיות

דפדפנים מבוססי Chrome יכולים גם להחיל את ערכי <datalist> על:

1. קלט עם סוג של "date". המשתמש יכול לבחור ממערך של אפשרויות המוגדרות כערכים YYYY-MM-DD אך מוצגות בפורמט המקומי שלהן.

2. קלט עם סוג "צבע". המשתמש יכול לבחור מבחירת צבעים המוגדרת כערכים הקסאדצימליים בן שש ספרות (ערכים בן שלוש ספרות לא עובדים).

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

ראה את הפנס
HTML5 <datalist> על סוגי קלט אחרים על ידי SitePoint (@SitePoint)
על CodePen.

<datalist> עיצוב CSS

אם ניסית לעיצב תיבת <select>, … היה לך קל!

אינפוט <input> יכול להיות עיצוב כרגיל, אך <datalist> המקושר ואלמנטים הבנים <option> שלו לא ניתן לעיצוב ב-CSS. שרטוט הרשימה נקבע לגמרי על ידי הפלטפורמה והדפדפן.

I hope this situation improves, but for now, a solution is proposed at MDN which:

1. מנפה את ההתנהגות הברירת מחדל של הדפדפן
2. מתייחס ביעילות ל-<datalist> כאל <div> כך שניתן לעיצב אותו ב-CSS
3. משחזר את כל הפונקציונליות של autocomplete ב-JavaScript

I’ve enhanced it further and the code is available on GitHub. To use it, load the script anywhere in your HTML page as an ES6 module. The jsDelivr CDN URL can be used:

<script src="https://cdn.jsdelivr.net/npm/datalist-css/dist/datalist-css.min.js"></script>

או שאפשר להתקין אותו באמצעות npm אם אתה משתמש במאגר:

npm install datalist-css

האלמנטים <datalist> שלך חייבים להשתמש בפורמט <option>value</option>. לדוגמה:

<datalist id="mylist">
  <option>label one</option>
  <option>label two</option>
  <option>label three</option>
</datalist>

הערה: <option value="value" /> לא יכול לשמש מכיוון שזה גורם לאלמנט ריק שלא ניתן לשפץ!

ניתן להוסיף CSS לאחר מכן כדי לשפץ חלק או את כל האלמנטים <datalist> ו- <option>. לדוגמה:

datalist {
  position: absolute;
  max-height: 20em;
  border: 0 none;
  overflow-x: hidden;
  overflow-y: auto;
}

datalist option {
  font-size: 0.8em;
  padding: 0.3em 1em;
  background-color: #ccc;
  cursor: pointer;
}

/* שיפוץ רשמיות */
datalist option:hover, datalist option:focus {
  color: #fff;
  background-color: #036;
  outline: 0 none;
}

דוגמה:

ראה את הפנס
סגנון CSS של HTML5 <datalist> מילוי אוטומטי על ידי SitePoint (@SitePoint)
ב- CodePen.

הסגנון עובד, אבל האם זה שווה את המאמץ? אני בטוח שלא…

• שיפוץ המקלדת הסטנדרטית של הדפדפן, העכבר ובקרת מגע מגיע בקושי. הדוגמה MDN אינה תומכת באירועי מקלדת ולמרות שניסיתי לשפר אותה, יהיו בטח בעיות בכמה מכשירים.
• אתה מסתמך על 200 שורות של JavaScript כדי לפתור בעיה CSS. הוא מצרף ל- 1.5kB, אבל יכול להציג בעיות ביצועים אם דרשת רבים <datalist> ארוכים באותו הדף.
• אם JavaScript הוא דרישה, האם יהיה מועדף להשתמש ברכיב JavaScript יפה יותר, עקבי יותר ובוצע בקרב?

השליטה חוזרת ל-HTML5 הסטנדרטי <datalist> ללא עיצוב כשפונקציית JavaScript נכשלת, אך זה יתרון מינורי.

יצירת <datalist> מוגדרת על ידי Ajax

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

1. יישום אימות אופציונלי שמקבל רק ערך ידוע ב<datalist>.
2. הגדרת אלמנטים <option> מנתונים שהוחזרו על ידי קריאות Ajax ל-APIs חיפוש.
3. הגדרת ערכים של שדות אחרים כשאפשרות נבחרת. לדוגמה, בחירת "ארצות הברית" מגדירה "US" בקלט נסתר.

הקוד צריך בעיקר להגדיר מחדש אלמנטים <option>, אם כי יש כמה התחשבויות בקידוד:

• בקשת Ajax ל-API צריכה להתרחשת רק אחרי שנכנס מספר מינימלי של תווים.
• אירועי הקלדה צריכים להיות דחויים. כלומר, קריאת Ajax מופעלת רק אחרי שהמשתמש הפסיק להקליד לפחות חצי שנייה.
• תוצאות החיפוש צריכות להיות מקושרות כך שלא יהיה צורך לחזור על או לנתח קריאות זהות.
• להימנע משאילתות שאינן הכרחיות. לדוגמה, הזנת "un" מחזירה 12 מדינות. אין צורך לבצע קריאות נוספות של Ajax עבור "unit" או "united" מאחר שכל האפשרויות המתקבלות מוכלות בתוך 12 התוצאות המקוריות.

I’ve created a standard Web Component for this, and the code is available on GitHub. The CodePen example below allows you to select a valid country after entering at least two characters. A music artist autocomplete then returns artists who originated in that country with names matching the search string:

ראה את הפס
HTML5 <datalist> עם אוטוקולט של Ajax על ידי SitePoint (@SitePoint)
ב-CodePen.

• מנוע החיפוש אחר מדינות מוסדר על ידי restcountries.eu.
• מנוע החיפוש אחר מוזיקאים מוסדר על ידי musicbrainz.org.

כדי להשתמש בו ביישום שלך, הטען את התסריט בכל מקום בדף ה-HTML שלך כמודול ES6. כתובת ה-CDN של jsDelivr יכולה לשמש לכך:

<script src="https://cdn.jsdelivr.net/npm/datalist-ajax/dist/datalist-ajax.min.js"></script>

או שאפשר להתקין אותו עם npm אם אתה משתמש במכבד:

npm install datalist-ajax

צור פיזור <auto-complete> עם ילד <input> לשימוש כשדה קלט הנתונים. לדוגמה, החיפוש אחר מדינות משתמש בזה:

<label for="country">country lookup:</label>

<auto-complete
  api="https://restcountries.eu/rest/v2/name/${country}?fields=name;alpha2Code;region"
  resultname="name"
  querymin="2"
  optionmax="50"
  valid="please select a valid country"
>
  <input type="text" id="country" name="country" size="50" required />
</auto-complete>

<auto-complete> תכונות האלמנט:

attribute	description
api	the REST API URL (required)
resultdata	the name of the property containing a result array of objects in the returned API JSON (not required if only results are returned)
resultname	the name of the property in each result object which matches the search input and is used for datalist <option> elements (required)
querymin	the minimum number of characters to enter before a search is triggered (default: 1)
inputdelay	the minimum time to wait in milliseconds between keypresses before a search occurs (default debounce: 300)
optionmax	the maximum number of autocomplete options to show (default: 20)
valid	if set, this error message is shown when an invalid value is selected

כתובת ה-REST URL חייבת להכיל לפחות מזהה אחד ${id} שמוחלף על ידי הערך שנקבע ב-<input> עם זה id. בדוגמה לעיל, ${country} בכתובת api מתייחסת לערך ב-<input> הילד, שיש לו id של "country". הכתובת תשתמש בדרך כלל בקלט הילד, אך כל שדות אחרים בדף יכולים להיעתק.

ה-API restcountries.eu מחזיר אובייקט יחיד או מערך של אובייקטים המכילים מידע על המדינה. לדוגמה:

[
  {
    "name": "Cyprus",
    "alpha2Code": "CY",
    "region": "Europe"
  },
  {
    "name": "Sao Tome and Principe",
    "alpha2Code": "ST",
    "region": "Africa"
  },
  {
    "name": "Andorra",
    "alpha2Code": "AD",
    "region": "Europe"
  }
]

התכונה resultdata לא צריכה להיקבע כי זהו הנתונים היחידים שמוחזרים (אין אובייקט עטוף). התכונה resultname חייבת להיקבע ל-"name" כי תכונה זו משמשת למילוי רכיבי <option> datalist.

שדות אחרים יכולים למלא אוטומטית כשנבחרת אפשרות. הקלטות הבאות מקבלות את הנתונים של התכונות "alpha2Code" ו-"region" מכיוון שנקבעה תכונה data-autofill:

<input data-autofill="alpha2Code" type="text" id="countrycode" name="countrycode" readonly />

<input data-autofill="region" type="text" id="region" name="region" readonly />

איך datalist-ajax עובד

אפשר לדלג על הקטע הזה אם אינך רוצה לקרוא 230 שורות קוד ולשמור על הקסם!

הקוד מתחיל ביצירת <datalist> חדש בתוך <auto-complete>, אשר מחובר ל <input> הילד באמצעות תכונת list. מפעיל מנגנון עירוץ אירוע input את <input> וקורא לפונקציה runQuery() כאשר נכנסו מספר מינימאלי של תווים והמשתמש לא עדיין מקליד.

runQuery() בונה את כתובת האתר של ה-API מהנתונים בטופס ועושה שיחה Ajax באמצעות Fetch API. ה-JSON שהתבוא מופץ, ואז מורכבת ריקוד דומייני משומשת שמכיל <option> אלמנטים ומונח במטרייה.

A datalistUpdate() function is called, which updates the <datalist> with the appropriate cached DOM fragment. Further calls to runQuery() avoid Ajax calls if a query has already been cached or a previous query can be used.

A change event handler also monitors the <input>, which is triggered when focus is moved from the field and the value has been modified. The function checks that the value matches a known option and, if necessary, uses the Constraint Validation API to show the error message provided in the valid attribute.

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

שים לב ש-DOM הצללית לא משמש. זה מבטיח ש- <input> האוטומטי (וה- <datalist>) ניתן לשירות על ידי CSS ולגישה על ידי תוכניות אחרות אם יהיה זקוק.

דנקין’ <datalist>

ה-HTML5 <datalist> כולל מגבלות אך הוא אידאלי אם אתה זקוק לשדה אוטומטי פשוט שאינו תלוי במסגרת. חסרון התמיכה ב-CSS הוא בושה, אך ספקים תורומסיים עשויים להתייחס לכך בסוף.

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

שאלות נפוצות על שלדים קלים לגבי שליטה במלאי עם HTML5 Datalist