Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

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

Open
  • Is something wrong?
#141 3 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

@AdityaOP007 is already working on this.

Since Aug 10, 2026.

  • #160 by @AdityaOP007 — open

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
55/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Quiet
Tech stack
github, javascript
Domain
api, frontend

Research direction

Start at the Home page organization search input and trace the existing chip-based organization selection workflow and GitHub API integration. Check how the current input handles queries, then map the dropdown, debouncing, keyboard and mouse selection, loading, empty, duplicate, clearing, and outside-click states. Done means relevant suggestions appear accessibly and selection integrates with the existing workflow on desktop and mobile.

Written by the indexing model from the issue text.

Description

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.

Dominant language
JavaScript
Stars
42
Forks
124
Avg merge
2d 22h
Merged PRs (30d)
10

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from AOSSIE-Org/OrgExplorer

All issues in AOSSIE-Org/OrgExplorer

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.