Feature - Implement Search Functionality with HTMX

[UcheWendy]

To enhance usability, we will implement a search feature that allows students to quickly find any bone or sub-bone. This task involves building the backend search logic and connecting the frontend search bar using HTMX for a dynamic user experience. This leverages the HTMX integration work from Sprint 1.

Tasks:

1. Create Backend Search Endpoint:
   In server.js, create a new GET endpoint, for example, /api/search.
   This endpoint should accept a query parameter (e.g., ?q=...) and search the names of all bones and sub-bones in the available JSON data files (starting with the "Bony Pelvis" data from Sprint 1).
   The endpoint must return the search results as a formatted HTML fragment (e.g., a list of elements)

2. Integrate Frontend with HTMX:
   In boneset.html, add HTMX attributes to the search input (input id="search-bar").
   Use attributes like hx-get="/api/search", hx-trigger="keyup changed delay:500ms", and hx-target="#search-results" to send a request to the backend as the user types.

3. Handle Search Result Clicks:
   The links returned by the search endpoint should, when clicked, trigger JavaScript to automatically select the correct boneset, bone, and sub-bone in the dropdowns, updating the viewer accordingly.

Acceptance Criteria:

1. Typing in the search bar dynamically displays a list of matching bones below it.
2. The search is fast and responsive.
3. Clicking on a search result correctly updates the dropdowns and displays the corresponding bone in the viewer.