#95 UI: Search Input Component
Description
EditCreate reusable search input component with debounce.
Component: api/ui/templates/components/search_input/
Files:
- search_input.html
- search_input.css
- search_input.js
Features:
- Input:
- Search icon
- Placeholder text
- Clear button (X)
- Loading spinner during search
- Debounce:
- Configurable delay (default 300ms)
- Cancel pending search on clear
- Keyboard:
- Enter to search immediately
- ESC to clear
- Tab focus styles
- States:
- Empty
- Typing (debounce active)
- Searching (loading)
- Has value
JavaScript API:
- new SearchInput(element, config)
- searchInput.setValue(value)
- searchInput.clear()
- searchInput.onSearch(callback)
Integration:
- URL parameter sync (?search=query)
- Works with DataTable filtering
With ultra attention to details and correctness.
Before closing: write comment summarizing implementation with screenshot.
Comments
Loading comments...
Context
Loading context...
Audit History
View AllLoading audit history...