The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Listen for changes to the main input, use its value to find a matching record, and copy that record’s values into the related fields. For a form with 15 competitions, a lookup object is easier to maintain than 15 separate sets of assignments. If users can select a suggestion from a <datalist>, handle the input’s input event rather than relying only on keyup.
How the autofill pattern works
Treat the value in the first field as a key. Each key points to a record containing the values for comptype, compclass, comp_badge, and colours. When the main field changes, look up that record and update the associated controls.
This avoids repeating assignments for every competition. It also gives you one place to add, edit, or remove a competition’s values.
Build a lookup for your competitions
Give each form control an id, then define the competition data in JavaScript. The example uses lowercase keys so that matching is case-insensitive.
#1 Best Overall
<label for="competition">Competition</label>
<input id="competition" list="competition-options">
<datalist id="competition-options">
<option value="La Liga">
<option value="UEFA Champions League">
</datalist>
<label for="comptype">Type</label>
<input id="comptype">
<label for="compclass">Class</label>
<input id="compclass">
<label for="comp_badge">Badge</label>
<input id="comp_badge">
<label for="colours">Colours</label>
<input id="colours">
<script>
const competitions = {
"la liga": {
comptype: "League",
compclass: "Domestic",
comp_badge: "la-liga.png",
colours: "red, yellow"
},
"uefa champions league": {
comptype: "Cup",
compclass: "International",
comp_badge: "champions-league.png",
colours: "blue, white"
}
};
const competitionInput = document.getElementById("competition");
const fields = {
comptype: document.getElementById("comptype"),
compclass: document.getElementById("compclass"),
comp_badge: document.getElementById("comp_badge"),
colours: document.getElementById("colours")
};
competitionInput.addEventListener("input", () => {
const key = competitionInput.value.trim().toLowerCase();
const record = competitions[key];
for (const [fieldName, field] of Object.entries(fields)) {
field.value = record ? record[fieldName] : "";
}
});
</script>Replace the sample values with the values your form needs, and add the other competition records using the same key-and-record structure. The example clears the related fields when the text does not exactly match a key after trimming and lowercasing; this prevents values for a previous competition from remaining visible after the user edits the name.
Choose the event for the way the field is used
Typed text and datalist selection
The historical SitePoint discussion first demonstrates keyup for typed text, then uses input in a follow-up involving a <datalist>. The example above uses input so the same handler responds to edits and to a user changing the field through its suggestion list. The thread does not establish current browser compatibility or whether selecting a suggestion submits a form; test those behaviors in the browsers and form flow you support.
Rank #2
Exact matching versus partial matching
The lookup shown here fills fields only when the full normalized value matches a key. That is appropriate when the competition name identifies one unambiguous record. It does not fill fields for a partial entry such as La. If you want suggestions while a person is still typing, that is a different interaction: define how to handle multiple possible matches instead of silently choosing one.
Adapt the example safely
- Keep the property names in each record aligned with the related field IDs used by the script.
- Use the actual values required by your form; the sample types, classes, badge filenames, and colours are illustrative.
- If you want unmatched text to leave existing values untouched, change the clearing behavior deliberately. Leaving old values in place can make them appear to belong to the newly entered competition.
- For non-text controls, assign values that are valid for that control, such as an existing option value for a select element.
Where this example comes from
The original question on SitePoint Forums asks how to fill four fields based on a competition name without pressing a button. James Hibbard’s reply recommends listening for keyup and autofilling when the value matches a predefined value. The datalist follow-up demonstrates lowercasing the entered text before matching. A related historical Stack Overflow example copies one input’s value to another and mentions pairing events for a datetime-local field; event choice should be made for the actual control rather than generalized from that example.
Recommended Free Tools
Quick Recap
Rank #4
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
