Trigger Simple-Jekyll-Search using JavaScript

Question

I am using the Simple-Jekyll-Search library for a website I am currently building.

I want to have a feature where a user can click on a button (imagine tag or category buttons beneath the text input), and that automatically populates the search box with the corresponding tag name, and performs the search.

I have managed to achieve the first part of it by simply setting the search input's value to my desired text, and then I tried to trigger a various key events but unfortunately this doesn't seem to trigger the search. Of course, the search box works normally and results do appear when I type into it manually.

Looking at the library's source file, this seems to be the relevant part to trigger the search, but as far as I can see, I should just need to send a keyup event to the search input to trigger the search.

function registerInput() {
  options.searchInput.addEventListener('keyup', function (e) {
    if (isWhitelistedKey(e.which)) {
      emptyResultsContainer()
      search(e.target.value)
    }
  })
}

However, the following code doesn't work (it fills the text-input with my text, but does no search results come up, no error message):

function tagButtonClick(text) {
    document.getElementById('search-input').value = text;
    $('#search-input').trigger(jQuery.Event('keyup', {which: 65}));
}

I had a look at this other answer as well, but the approaches there seem to not do anything either.

Any idea how I can achieve the effect I want?

The function is called on a button press. It definitely gets called, since the search-input element's text is updating, but the keyup event doesn't have any noticeable effect (even when I trigger it using the developer console). — JunShern Chan, Mar 20 '18 at 00:14
in case you haven't worked it out yet, place `console.log('input registered')` right after `function registerInput() {`; and `console.log('render')` after `if (isValidQuery(query)) {`. Check if the first one is logged when the page loads, and the second one when you click on your tag, this way you can start tracking what is being executed and what is not — Scaramouche, Mar 20 '18 at 11:44

score 1 · Accepted Answer · answered Mar 21 '18 at 13:23

I managed to solve the problem not by triggering keypresses, but it turns out that the Simple-Jekyll-Search API allows for programmatic search:

// If this is your search object
window.simpleJekyllSearch = new SimpleJekyllSearch({
  searchInput: document.getElementById('search-input'),
  resultsContainer: document.getElementById('results-container'),
  json: '{{ site.baseurl }}/search.json',
  searchResultTemplate: '<li><a href="{url}" title="{desc}">{title}</a></li>',
  noResultsText: 'No results found'
})

// Use this to search
setTimeout(() => {
  window.simpleJekyllSearch.search('t')
}, 2000)

Which achieves what I wanted perfectly. Thanks to christian-fei who helped me with this.

Trigger Simple-Jekyll-Search using JavaScript

1 Answers1