搜索不起作用时输入功能答案

【问题标题】：Enter function when searching not working搜索不起作用时输入功能
【发布时间】：2020-07-10 22:01:57
【问题描述】：

我已经尝试了下面的代码，但是当我按下回车键时，没有任何反应（它应该执行搜索功能）。

<head>
  <script type="text/javascript">
    $(document).ready(function() {
      prepareSearch($('#searchBox'), {
        'searchLine': '.searchTarget div.product',
        'searchSightPoint': 'div.stand, span.apron, div.aircraft, div.image',
        'fade': true,
        'contrastString': false
      });
      $('#standsearch').submit(function(e) {
        e.preventDefault();
      });
    });
    var input = document.getElementById("searchBox");
    input.addEventListener("keyup", function(event) {
      if (event.keyCode === 13) {
        event.preventDefault();
        document.getElementById("btn").click();
      }
    });
  </script>
</head>

<body>
  <div class="row" id="standsearch">
    <form class="form-search" action="#standsearch">
      <div class="input-append">
        <input type="text" id="searchBox" class="span2 search-query" placeholder="Search Stands" />
        <button type="button" id="btn" class="btnsearch">Find</button>
      </div>
    </form>
  </div>
</body>

我尝试过使用 onclick="" 但是我不确定我应该在其中添加什么。

【问题讨论】：

您没有 id 为 'standardsearch' 的元素，首先将 $('#standsearch') 替换为 $('.form-search'). 以通过其类名访问表单。
在哪里捕捉到 id btn 元素的点击事件？
@Triby 这样做会导致搜索功能完全停止工作。另外，我确实有一个 id 为“standsearch”的元素（第一个 div 元素）。
div 没有submit 方法：$('#standsearch').submit(function(e) {
我现在该怎么办？我已经按照你的建议做了，但没有任何改变，我仍然遇到同样的问题。 @Triby

标签： javascript html search onclick

【解决方案1】：

您的主要问题似乎是在特定元素上发生（模拟）点击时如何调用搜索函数。 onclick 属性可能会正常工作，但通常认为它不如使用 Event Listener。

不清楚你的更复杂的代码示例应该如何组合在一起，所以这里是一个干净的例子，展示了如何获取输入元素的值（当按下 ENTER 时）并将该值传递给搜索功能。

（请注意，实际上不需要模拟点击，因为我们可以简单地从两个侦听器调用相同的搜索函数，而不是让一个侦听器依赖另一个侦听器来启动搜索。）

// Defines global variables
const
  searchBox = document.getElementById("searchBox"),
  btn = document.getElementById("btn"),
  haystack = document.getElementById("sentence").textContent.split(" ");


// Calls `handleEnterKeyInSearchBox` when `keyup` event happens in searchBox
searchBox.addEventListener("keyup", handleEnterKeyInSearchBox);
// Calls `handleButtonClick` when `click` event happens on btn
btn.addEventListener("click", handleButtonClick);


// Defines `handleEnterKeyInSearchBox` function
function handleEnterKeyInSearchBox(event){
  // Simulates a click on #btn if ENTER is pressed while #searchBox has focus
  if (event.keyCode === 13) {
    event.preventDefault();
    btn.click();
  }
}

// Defines `handleButtonClick` function
function handleButtonClick(event){
  const needle = searchBox.value; // Gets item to search for
  doSearch(needle, haystack); // Calls search function
}

// Defines a search function to use
function doSearch(theNeedle, theHaystack){
  // Gets index of word in sentence (or -1 if word is not found)
  const index = theHaystack.indexOf(theNeedle);
  // Reports result
  if(index > -1){
    console.log(`Item '${theNeedle}' found at index ${index}`);
  }
  else{
    console.log(`Could not find item '${theNeedle}'`);
  }
}

<p id="sentence">The quick brown fox jumps over the lazy dog</p>
<input id="searchBox" />
<button id="btn">Find</button>

【讨论】：