78 lines
3.1 KiB
JavaScript
78 lines
3.1 KiB
JavaScript
|
document.addEventListener('DOMContentLoaded', function () {
|
||
|
|
let courseList = {};
|
||
|
|
|
||
|
|
// Fetch the course_list.json file
|
||
|
|
fetch('course_list.json')
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(data => {
|
||
|
|
courseList = data; // Load the data into courseList variable
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
console.error('Error loading course list:', error);
|
||
|
|
});
|
||
|
|
|
||
|
|
const courseInput = document.getElementById('course');
|
||
|
|
const autocompleteList = document.getElementById('autocomplete-list');
|
||
|
|
|
||
|
|
// Event listener for course input keyup (every time user types)
|
||
|
|
courseInput.addEventListener('input', function () {
|
||
|
|
const query = this.value.toUpperCase(); // Convert input to uppercase to match course ID and name
|
||
|
|
autocompleteList.innerHTML = ''; // Clear any previous suggestions
|
||
|
|
|
||
|
|
if (!query) {
|
||
|
|
return false; // If input is empty, stop here
|
||
|
|
}
|
||
|
|
|
||
|
|
let matchCount = 0; // Keep track of the number of matches
|
||
|
|
|
||
|
|
// Filter through the courseList object
|
||
|
|
for (const courseCode in courseList) {
|
||
|
|
const courseName = courseList[courseCode].toUpperCase();
|
||
|
|
|
||
|
|
// Match either the course ID or part of the course name
|
||
|
|
if (courseCode.startsWith(query) || courseName.includes(query)) {
|
||
|
|
const suggestionItem = document.createElement('div');
|
||
|
|
suggestionItem.innerHTML = `<strong>${courseCode}</strong> - ${courseList[courseCode]}`;
|
||
|
|
suggestionItem.addEventListener('click', function () {
|
||
|
|
// On click, set the input value and close the dropdown
|
||
|
|
courseInput.value = `${courseCode} - ${courseList[courseCode]}`;
|
||
|
|
autocompleteList.innerHTML = '';
|
||
|
|
});
|
||
|
|
autocompleteList.appendChild(suggestionItem);
|
||
|
|
matchCount++;
|
||
|
|
|
||
|
|
if (matchCount >= 10) break; // Limit suggestions to 10 for better performance
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// If no matches, show a 'no results' message
|
||
|
|
if (matchCount === 0) {
|
||
|
|
const noResultsItem = document.createElement('div');
|
||
|
|
noResultsItem.innerHTML = `<em>No courses found</em>`;
|
||
|
|
autocompleteList.appendChild(noResultsItem);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Close the autocomplete dropdown when clicking outside
|
||
|
|
document.addEventListener('click', function (e) {
|
||
|
|
if (e.target !== courseInput) {
|
||
|
|
autocompleteList.innerHTML = '';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Handle form submission
|
||
|
|
document.getElementById('mainForm').addEventListener('submit', function(event) {
|
||
|
|
event.preventDefault(); // Prevent the default form submission
|
||
|
|
|
||
|
|
// Trigger the sliding animation
|
||
|
|
document.getElementById('formCard').classList.add('active');
|
||
|
|
document.getElementById('resultsCard').classList.add('active');
|
||
|
|
|
||
|
|
// Optional: Log form data to the console for testing
|
||
|
|
const formData = new FormData(this);
|
||
|
|
const name = formData.get('name');
|
||
|
|
const course = formData.get('course');
|
||
|
|
console.log(`Name: ${name}, Course: ${course}`);
|
||
|
|
});
|
||
|
|
});
|