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

[lafriks]

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]

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

[lafriks]

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

[onweru]

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

[lafriks]

I don't mind if you do it

[lafriks]

Thanks for your work and theme! ❤️