Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable starting search with keyboard shortcut #2423

Closed
olivroy opened this issue Mar 19, 2024 · 6 comments · Fixed by #2760
Closed

Enable starting search with keyboard shortcut #2423

olivroy opened this issue Mar 19, 2024 · 6 comments · Fixed by #2760
Labels
feature a feature request or enhancement front end 🌷 General HTML, CSS, and JS issues tidy-dev-day 🤓 Tidyverse Developer Day rstd.io/tidy-dev-day

Comments

@olivroy
Copy link
Collaborator

olivroy commented Mar 19, 2024

Like typing / to start search. This is enabled on Quarto websites by default

@hadley hadley added feature a feature request or enhancement front end 🌷 General HTML, CSS, and JS issues labels Apr 11, 2024
@hadley

This comment was marked as outdated.

@olivroy

This comment was marked as outdated.

@hadley
Copy link
Member

hadley commented Apr 11, 2024

This would be a good project for someone who knows a little bit about HTML and JS. Since the pkgdown search is a bit simpler than quarto, I think all that / would need to do is set the focus to the search field. I also don't know much javascript, so I'd typically ask chatGPT:

When the user presses /, set focus to the seach field (i.e. an input with type="search")

<!DOCTYPE html>
<html>
<head>
  <title>Focus on Search Field</title>
  <script>
    document.addEventListener('keydown', function(event) {
      // Check if the pressed key is '/'
      if (event.key === '/') {
        event.preventDefault();  // Prevent any default action associated with the '/' key
        document.getElementById('searchField').focus();  // Set focus to the search input
      }
    });
  </script>
</head>
<body>

<!-- Search input field -->
<input type="search" id="searchField" placeholder="Search...">

</body>
</html>

That isn't exactly what I was thinking, but it is better to use the id. (Which for pkgdown is actually search-input).

The js would go in inst/BS5/assets/pkgdown.js along with all the other random js snippets we have.

@hadley

This comment was marked as outdated.

@olivroy

This comment was marked as outdated.

@hadley hadley added the tidy-dev-day 🤓 Tidyverse Developer Day rstd.io/tidy-dev-day label Apr 24, 2024
@jayhesselberth
Copy link
Collaborator

At one point, you could type ? and focus would switch to the search bar. Not sure when that stopped working.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature a feature request or enhancement front end 🌷 General HTML, CSS, and JS issues tidy-dev-day 🤓 Tidyverse Developer Day rstd.io/tidy-dev-day
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants