Question

我的javascript搜索栏出现了一些问题。我设置了一个简单的函数，可以在这里找到div标签的内容。效果很好，但我想创建设置搜索值的链接，因此也可以按类别细分页面。搜索栏设置了onKeyup事件，因此该功能通过键盘输入触发。单击指向输入值的函数的超链接，如何使该函数触发？下面的代码：

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";
    }

以及搜索栏的HTML

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

应注意，这些功能正在运行，但是要激活搜索，必须按返回键或在搜索栏中添加空格。

谢谢！

Answer 1

最简单的事情，只需调用myFunction

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

或者您可以调度事件。

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

带链接的Javascript搜索功能

1 个答案: