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

Idea: After the list of suggestions shows up, allow the user to select an entry with Arrow Up/Down keys and press enter to go to that page #122

Closed
lafriks opened this issue Jul 16, 2023 · 5 comments

Comments

@lafriks
Copy link
Contributor

lafriks commented Jul 16, 2023

Idea: After the list of suggestions shows up, allow the user to select an entry with Arrow Up/Down keys and press enter to go to that page

Originally posted by @bb1950328 in #15 (comment)

I implemented this using assets/js/custom.js but would be nice to move into theme itself:

function extendSearch() {
  search_field.addEventListener('keydown', function (e) {
    // Prevent curet from moving when up or down is pressed
    if (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 13) {
      e.preventDefault();
      return;
    }
  });
  search_field.addEventListener('keyup', function (e) {
    if (e.keyCode !== 38 && e.keyCode !== 40 && e.keyCode !== 13) {
      return
    }
    e.preventDefault();

    var results = e.target.parentNode.getElementsByClassName('search_result');
    if (results.length === 0) {
      return;
    }

    // Find the currently selected result and select the next or previous one
    var selected = -1;
    for (var i = 0; i < results.length; i++) {
      if (results[i].classList.contains('active')) {
        selected = i;
        results[i].classList.remove('active');
        break;
      }
    }

    if (e.keyCode === 38) {
      // For up arrow select the previous result
      selected = selected === -1 ? results.length - 1 : selected - 1;
      if (selected < 0) {
        selected = results.length - 1;
      }

      results[selected].classList.add('active');
      return;
    } else if (e.keyCode === 40) {
      // For down arrow select the next result
      selected = selected === -1 ? 0 : selected + 1;
      if (selected === results.length) {
        selected = 0;
      }

      results[selected].classList.add('active');
      return;
    }

    window.location.href = results[selected === -1 ? 0 : selected].href;
    return;
  });
}

window.addEventListener('load', () => extendSearch());
@onweru
Copy link
Owner

onweru commented Jul 17, 2023

@lafriks, would you like to open a PR with this change?

@lafriks
Copy link
Contributor Author

lafriks commented Jul 17, 2023

I can later next month if it's not done by then

@onweru
Copy link
Owner

onweru commented Jul 17, 2023

@lafriks, well I can do it. It's your work though, thought it would be better if the addition came from you.

@lafriks
Copy link
Contributor Author

lafriks commented Jul 17, 2023

I don't mind if you do it

onweru pushed a commit that referenced this issue Jul 29, 2023
Signed-off-by: weru <fromweru@gmail.com>
@onweru onweru closed this as completed Jul 29, 2023
@lafriks
Copy link
Contributor Author

lafriks commented Jul 31, 2023

Thanks for your work and theme! ❤️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants