I'm trying to create a drop-down autocomplete search input using Headless UI in react.
My data in the JSON file is nested as follows:
{
"Java": [
{
"course_number": "Java101",
"course_title": "Introduction to Java"
},
{
"course_number": "Java102",
"course_title": "Advanced Java"
},
"JS": [
{
"course_number": "JS101",
"course_title": "Introduction to JavaScript"
},
{
"course_number": "JS02",
"course_title": "Advanced JavaScript"
},
"Python": [
{
"course_number": "Python101",
"course_title": "Introduction to Python"
},
{
"course_number": "Python102",
"course_title": "Advanced Python"
}
]
}
I want the autocomplete drop box to display the following format:
Java
Java101
Java102
JavaScript
JS101
JS102
Python
Python101
Python102
My code does that only if you enter the full key, but if you enter part of the key, it only displays the keys without the values (course names).
My code:
import { useState } from 'react'
import { Combobox } from '@headlessui/react'
import './SearchComponent.css'
import CourseData from "../202210-departments.json"
const courses = CourseData
function SearchComponent() {
const [selectedCourse, setSelectedCourse] = useState(courses[0])
const [query, setQuery] = useState('')
const filteredCourses =
query === '' ? Object.keys(courses)
: Object.keys(courses).includes(query)
? [query, ...courses[query].map(x => x.course_number)]
: Object.keys(courses).filter(x => x.includes(query))
return (
<Combobox value={selectedCourse} onChange={setSelectedCourse}>
<Combobox.Input onChange={(event) => setQuery(event.target.value)} />
<Combobox.Options>
{filteredCourses.map((course) => (
<Combobox.Option key={course} value={course}>
{course}
</Combobox.Option>
))}
</Combobox.Options>
</Combobox>
)
}
export default SearchComponent;
