Dynamic Dependent Select with Search (Vanilla JS Constraint)

Problem

The project was built using vanilla JavaScript, without modern frontend frameworks.

I needed to implement:

• A searchable <select> component
• Dynamically populated options from backend data
• A dependent dropdown scenario (Select 2 depends on Select 1)
• Clean UI styling aligned with the system design

Handling this manually in vanilla JS required significant effort, especially for search filtering and state synchronization between dropdowns.

---

Solution

• Evaluated whether to build a fully custom searchable dropdown from scratch.

• Integrated Select2 to accelerate development while meeting functional requirements.

• Implemented dynamic data loading so that:

  • Select 1 triggers data fetch/update
  • Select 2 updates based on Select 1’s selected value

• Ensured proper state reset when parent selection changes.

• Overrode default Select2 CSS to match the existing design system.

---

Technical Outcome

• Fully functional dependent dropdown system
• Search-enabled select component
• Dynamic data rendering with proper state handling
• UI consistency despite third-party component usage

---

Impact

• Reduced development time compared to building from scratch
• Improved usability with searchable options
• Delivered a maintainable and scalable dropdown solution
• Preserved design consistency through custom styling overrides