wish - keyboard up/down navigation against the search results

[appkr]

Hi?

I am not sure this is related to this project though--bc it's JS thing, I hope there is such function. I tried by myself, but was not easy to me. I think this helps others too~ I you don't have plan on this thing, please close this issue immediately.

Thanks ^^/

p.s. Shame on me, uuuugly code... but my approach was,

$('#search').on('keydown', function(e) {
  if (e.keyCode !== 38 && e.keyCode !== 40) {
    return;
  }

  var target = $('#search-results').find('li');

  if (! window.current) {
    if (target.length < 1) {
      return;
    }

    window.current = target.first();
  } else {
    window.current = (e.keyCode === 40) ? target.next().first() : target.prev().first();
  }

  window.current.get(0).focus();
});

[daviddarnes]

@appkr you can actually tab through the results and use shift + tab to go backwards.

[appkr]

@daviddarnes Thanks for the info. I checked it works. But people are comfortable with using up/down arrows in search box...

[daviddarnes]

@appkr that seems fair, but I don't think it needs to be in the main code as it forces these controls onto everyone. Others might be using up and down for different controls.

[appkr]

@daviddarnes That sounds reasonable. I'll need to dig more to make it work. Thanks.

[christian-fei]

Thanks @appkr and @daviddarnes !
When I find some time I may look into this and see what we can do to get this to work

[appkr]

Modified.

@christian-fei Thanks~ Anyway I did it by myself.

Still I think having this functionality (as an opt-in) helps people like me.

SimpleJekyllSearch({keyboardNavigation: true});

My implementation was so naive and dirty but ... for your/other's reference.

// ...

var self = this;

$('#search').on('keydown', function(e) {
  var key = e.which;
  var target = $('#search-results').find('li');

  if ((key !== 38 && key !== 40 && key !== 13) || target.length < 1) {
    return;
  }

  var navigate = function(direction) {
    var down = (direction == 'down') ? true : false;

    if (self.selected) {
      self.selected.removeClass('active');

      var next = down ? self.selected.next() : self.selected.prev();

      if (next.length > 0) {
        self.selected = next.addClass('active');
      } else {
        self.selected = down
          ? target.first().addClass('active')
          : target.last().addClass('active');
      }
    } else {
      self.selected = down
        ? target.first().addClass('active')
        : target.last().addClass('active');
    }
  };

  if (key === 40) {
    navigate('down');
  } else if (key === 38) {
    navigate('up');
  } else if (key === 13) {
    if (self.selected) {
      window.location.href = self.selected.find('a').attr('href');
    }
  }

  e.preventDefault();
});

[christian-fei]

@appkr Thank you for the idea, will work on it

[davebowker]

Up/Down in an autocomplete is pretty standard. I thought it was a bug when i tried to use it and it didn't work.

As @appkr said above, maybe have it as an option?

[damiannmm]

Hi @appkr may I ask how you implement it? I don't know where should I fork your snippet.

[appkr]

@damiannmm Since it was long time ago, i cannot remember the context at that time. Hope this link helps.
https://github.com/appkr/blog/blob/master/scripts/main.js#L197-L241
https://blog.appkr.dev/