Chapter 23: HTML Data Lists: ഫീല്ഡിനുള്ള ഓപ്ഷനുകൾ ഉൾപ്പെടുത്തുക (Providing Options with HTML Data Lists)

HTML <datalist> ടാഗ് എന്താണ്?

HTML <datalist> ടാഗ് ഒരു ഇൻപുട്ട് ഫീൽഡിനായി മുൻ‌കൂട്ടി നിർണ്ണയിച്ച ഓപ്ഷനുകളുടെ ഒരു ലിസ്റ്റ് നൽകാൻ സഹായിക്കുന്നു. ഉപയോക്താവിന് ഇനങ്ങൾ തിരഞ്ഞെടുക്കാനുള്ള സ്വാതന്ത്ര്യം നൽകിയേക്കും, അല്ലെങ്കിൽ നേരിട്ട് ടെക്സ്റ്റ് ടൈപ്പ് ചെയ്യാനും കഴിയും. ഈ ടാഗ് ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുന്നു, പ്രത്യേകിച്ച് ഫോം ഇൻപുട്ട് ഫീൽഡുകൾ ഉപയോഗിക്കുമ്പോൾ.

HTML <datalist> ടാഗിന്റെ ഘടന:

<label for="browser">Preferred Browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

Example:

<label for="car">Preferred Car Brand:</label>
<input list="cars" id="car" name="car">
<datalist id="cars">
  <option value="Toyota">
  <option value="Ford">
  <option value="Honda">
  <option value="BMW">
</datalist>

ഇവിടെ, ഉപയോക്താവിന് <input> ഫീൽഡിൽ “Preferred Car Brand” ടൈപ്പ് ചെയ്യുമ്പോൾ നിർദേശങ്ങൾ കാണിക്കപ്പെടും.

Key Elements of <datalist>:

1. <input> list attribute: <input> ഫീൽഡിലെ list ആട്രിബ്യൂട്ട് <datalist>-നെ ബന്ധിപ്പിക്കുന്നു.htmlCopy code<input list="cars">
2. <datalist> Tag: <datalist> ടാഗിനുള്ളിൽ നിരവധി <option>-കൾ ചേർക്കാം, ഓരോ ഓപ്ഷനും ഉപയോക്താവിന് നിർദ്ദേശിക്കപ്പെടും.htmlCopy code<datalist id="cars"> <option value="Toyota"> <option value="BMW"> </datalist>

Benefits of Using <datalist>:

1. Auto Suggestions:ഉപയോക്താവിന് ടെക്സ്റ്റ് എന്റർ ചെയ്യുമ്പോൾ, <datalist> ടാഗ് മുൻകൂട്ടി നിർണ്ണയിച്ച ഓപ്ഷനുകൾ പ്രദർശിപ്പിക്കും.
2. Increased User Experience:ടെക്സ്റ്റ് ടൈപ്പും ഓപ്ഷൻ തിരഞ്ഞെടുക്കലും ഒരേസമയം സാധ്യമാക്കുന്നതിലൂടെ, ഫോമുകളുടെ ഉപയോഗപ്രദതയും യൂസർ എക്സ്പീരിയൻസും മെച്ചപ്പെടുന്നു.

Enhancing with JavaScript:

JavaScript ഉപയോഗിച്ച് <datalist>-ന്റെ പ്രവർത്തനങ്ങൾ കൂടുതൽ വിപുലീകരിക്കാം, ഓപ്ഷനുകൾ പ്രോഗ്രാമാറ്റിക് ആയി മാറ്റുകയോ മറ്റേ പ്രവർത്തനങ്ങൾ കൈകാര്യം ചെയ്യുകയോ ചെയ്യാം.

<input list="languages" id="language" name="language">
<datalist id="languages">
  <option value="English">
  <option value="Spanish">
</datalist>

<script>
  document.getElementById('language').addEventListener('input', function() {
    console.log(this.value);
  });
</script>

Styling Data Lists:

Unfortunately, CSS ഉപയോഗിച്ച് <datalist>-ന്റെDropdown-നുള്ള Styling വരാന്തം പരിമിതമാണ്, കാരണം ബ്രൗസർ ഡിഫോൾട്ട് ലിസ്റ്റുകൾക്കും ഓപ്ഷനുകൾക്കും മുൻ‌ഗണന നൽകുന്നു. എന്നിരുന്നാലും, Input field-നെ Style ചെയ്യാം:

input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

Fallback for Unsupported Browsers:

എല്ലാ ബ്രൗസറുകളും <datalist> പിന്തുണയ്ക്കുന്നില്ല. അതിനാൽ, fallback content ഉപയോഗിക്കാൻ ശ്രമിക്കാം.

<input type="text" name="browsers" placeholder="Enter browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
</datalist>
<p>Your browser doesn't support datalist. Please type manually.</p>

Practical Use Cases for <datalist>:

1. Search Filters:ഒരു ഫോമിൽ സേർച്ച് ഫിൽട്ടറുകൾ പ്രവർത്തിപ്പിക്കാനും ഡാറ്റലിസ്റ്റ് ഉപയോക്താവിന് നിർദ്ദേശങ്ങൾ നൽകാനും കഴിയും.
2. Preference Selections:ബ്രൗസർ അല്ലെങ്കിൽ ലൊക്കേഷൻ പോലുള്ള മുൻഗണനകൾ എളുപ്പം തെരഞ്ഞെടുക്കാനായി.
3. Autocomplete Options:ഉപയോക്താവിന് autocomplete ഓപ്ഷനുകൾ നൽകുന്ന Textbox-കൾ സൃഷ്ടിക്കാനും <datalist>സഹായകരമാണ്.

---

സങ്കലനം:

HTML <datalist> ടാഗ് input fields-ന്റെ പ്രകടനം മെച്ചപ്പെടുത്താൻ സഹായിക്കുന്നു, ഉപയോക്താവിന് നിർദ്ദേശങ്ങൾ നൽകുകയും തെരഞ്ഞെടുക്കാൻ ഏർപ്പെടുത്തുകയും ചെയ്യുന്നു. പ്രായോഗികമായ ഫോമുകൾ സൃഷ്ടിക്കാനും ഉപയോഗപ്രദമായ user interaction ഉണ്ടാക്കാനും ഇത് പ്രധാനപ്പെട്ടൊരു മാർഗമാണ്.