带链接的Javascript搜索功能

Question

I'm having a few issues with my javascript search bar. I set up a simple function that I found on here to search the contents of div tags. Works great, but I want to create links that set the value of the search, so I can break up my page by categories as well. The search bar is set up with an onKeyup event, so the function triggers with the input from the keyboard. How can I make the function fire with clicking the hyperlink to the function that inputs the value? Code below:

function myFunction() {
  var input = document.getElementById("Search");
  var filter = input.value.toLowerCase();
  var nodes = document.getElementsByClassName('connect-cat');


  for (i = 0; i < nodes.length; i++) {

  if (nodes[i].innerHTML.toLowerCase().includes(filter)) {
      nodes[i].style.display = "block";
    } else {
      nodes[i].style.display = "none";
    }
  }
}

function experienceMore() {
    document.getElementById("Search").value = "Experience more campaign";
    }

function firstChoice() {
    document.getElementById("Search").value = "First choice";
    }

And the HTML for the search bar

      <input type="text" id="Search" onKeyup="myFunction()" Placeholder="Please enter a search term...">

It should be noted that the functions are working, however to activate the search one would have to hit the return key or add a space to the search bar.

Thanks in advance!

Answer 1

simplest thing, just call myFunction

function firstChoice() {
  document.getElementById("Search").value = "First choice";
  myFunction()
}

Or you can dispatch an event.

var el = document.getElementById("Search")
el.value = "First choice"
var e = document.createEvent('HTMLEvents');
e.initEvent("keyup", false, true);
el.dispatchEvent(e)