GitHub User Search

Real API integration with error handling and fallback

Live Demo

Try searching for: "octocat", "torvalds", "gaearon"

Try It

Type a GitHub username to search.

The component automatically debounces input and shows loading state.

Falls back to mock data if API fails.

Implementation
searchCallback

Set async function:

select.searchCallback = async (term) => { ... }

Return array of objects with value, label, subtitle, icon properties.

Always implement error handling!

Product Search with Delay

Simulated API call with 300ms delay

Live Demo

Try searching for: "laptop", "mouse", "chair"

Try It

Simulated delay shows loading behavior.

Results filtered client-side after fetch.

Implementation
Delayed Search
await delay(300);

Simulates real API latency.

Component shows loading message during wait.

Country Lookup

Search countries with flag emojis

Live Demo

Try searching for: "united", "germany", "japan"

Try It

Fast local search with flag emojis.

200ms delay simulates network latency.

Implementation
Client Filtering

Filter local array asynchronously.

countries.filter(c => c.name.includes(term))

Great for static lists with async UX.

💡 Best Practices

  • Debouncing: The component automatically debounces search input to reduce API calls
  • Loading State: Use loading-message to show feedback during search
  • Error Handling: Always implement proper error handling with fallback data
  • Minimum Length: Use min-search-length to prevent searching with very short terms
  • Rate Limits: Be aware of API rate limits and implement appropriate fallbacks