Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

[FEATURE] : Implement Debounced GitHub Organization Autocomplete with Keyboard Navigation

Aperta
  • Qualcosa non va?
#141 3 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@AdityaOP007 ci sta già lavorando.

Dal 10/8/2026.

  • #160 di @AdityaOP007 — aperta

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
55/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
github, javascript
Ambito
api, frontend

Direzione di ricerca

Inizia dal campo di ricerca delle organizzazioni nella Home page e segui il workflow esistente per la selezione delle organizzazioni basata su chip e l’integrazione con la GitHub API. Verifica come l’input attuale gestisce le query, quindi mappa gli stati del dropdown, del debouncing, della selezione da tastiera e con il mouse, del caricamento, dell’assenza di risultati, dei duplicati, dello svuotamento e dei clic al di fuori. L’attività è completata quando i suggerimenti pertinenti vengono mostrati in modo accessibile e la selezione si integra con il workflow esistente su desktop e mobile.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

enhancement

Feature and its Use Cases

Improve the GitHub organization search experience on the Home page by introducing a production-ready autocomplete dropdown.

Currently, users need to type the complete organization name before starting an analysis. This can be slow, error-prone, and inconvenient, especially for organizations with long names.

Proposed Improvements

  • Add a debounced search to reduce unnecessary GitHub API requests while typing.
  • Fetch matching GitHub organizations dynamically using the GitHub Search API.
  • Display up to 7–8 relevant organization suggestions in a dropdown below the search input.
  • Display each suggestion with:
    • Organization avatar
    • Organization login/name
  • Support keyboard navigation:
    • Arrow Down → Move to the next suggestion.
    • Arrow Up → Move to the previous suggestion.
    • Enter → Select the highlighted suggestion.
  • Allow users to select an organization using the mouse.
  • Highlight the currently selected suggestion during keyboard navigation.
  • Show a loading state while fetching suggestions.
  • Show an empty state when no matching organizations are found.
  • Ignore very short queries (e.g., fewer than 2 characters) to minimize unnecessary API requests.
  • Prevent duplicate suggestions from appearing.
  • Ensure the autocomplete integrates smoothly with the existing chip-based organization selection workflow.

Benefits

  • Faster organization search.
  • Improved user experience.
  • Reduced typing effort.
  • Fewer spelling mistakes.
  • Lower GitHub API usage through debouncing.
  • Better accessibility with full keyboard support.
  • Production-ready and responsive search experience.

Expected Outcome

Users should receive relevant GitHub organization suggestions while typing, navigate the dropdown using both keyboard and mouse, and quickly select an organization without entering the full name manually. The implementation should be responsive, accessible, and optimized to minimize unnecessary API requests.

Additional Context
Suggested UI Behavior
  • Suggestions should appear directly below the organization search input.
  • Each suggestion should include the organization's avatar and login name.
  • The active suggestion should be visually highlighted.
  • The dropdown should close when:
    • An organization is selected.
    • The user clicks outside the search area.
    • The input is cleared.
  • The component should work well on both desktop and mobile devices.
Code of Conduct
  • I have joined the Discord server and will post updates there
  • I have searched existing issues to avoid duplicates

If this feature is approved, I'd love to implement it. Kindly assign it to me if possible.

Lingua principale
JavaScript
Stelle
44
Fork
133
Merge medio
2g 22h
PR unite (30g)
10

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di AOSSIE-Org/OrgExplorer

Tutte le issue di AOSSIE-Org/OrgExplorer

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.