Coder Social home page Coder Social logo

Comments (10)

appkr avatar appkr commented on May 20, 2024 1

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();
});

from simple-jekyll-search.

daviddarnes avatar daviddarnes commented on May 20, 2024

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

from simple-jekyll-search.

appkr avatar appkr commented on May 20, 2024

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

from simple-jekyll-search.

daviddarnes avatar daviddarnes commented on May 20, 2024

@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.

from simple-jekyll-search.

appkr avatar appkr commented on May 20, 2024

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

from simple-jekyll-search.

christian-fei avatar christian-fei commented on May 20, 2024

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

from simple-jekyll-search.

christian-fei avatar christian-fei commented on May 20, 2024

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

from simple-jekyll-search.

davebowker avatar davebowker commented on May 20, 2024

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?

from simple-jekyll-search.

damiannmm avatar damiannmm commented on May 20, 2024

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

from simple-jekyll-search.

appkr avatar appkr commented on May 20, 2024

@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/

from simple-jekyll-search.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.