Question

我目前正在开发一个wiki搜索项目，但我遇到了一个问题，我无法在stackoverflow上找到答案。我按下回车键时尝试执行XMLHttp请求，但我还没有能够让它工作。它总是刷新页面，即使我已经尝试过keyup，keydown，submit和bind方法。

HTML code：

         <form class="form-search ngen-search-form" action="" method "get">
         <input type="text"name="q"id = "search-input"class="form-search 
          input"placeholder="Search keywords..."dir="ltr">
         <span class="glyphicon glyphicon-search form-search-submit" 
           id="search-trigger"aria-hidden="true"></span>
         </form>

JS代码：

$(document).ready(function(){
  //clicking search button expands search bar
  $('#search-trigger').on('click',function(e){
    e.preventDefault();
    if(!$('#search-input').hasClass("search-input-open")){
      $('#search-input').addClass('search-input-open');
    }else{
      send();
    }
  });
  //--problem here-- enter button refreshes page instead of executing js
  $("#search-input").keyup(function (e) {
          if(e.keyCode==13){
            console.log('works');
            send();
          }
         });
//click away from search form causes search bar to close
  $(document).on('click', function(e) {
    e.preventDefault();
    if(!$(e.target).is('#search-trigger')&&!$(e.target).is('#search-input')) {
      $('#search-input').removeClass('search-input-open');
    }
  });
  //request function to wikipedia API
  function send(){
    var xhr = new XMLHttpRequest();
    //add precautionary if nothing entered
    var searchTerm = document.getElementById('search-input').value;
    var string = "http://en.wikipedia.org/w/api.php?action=opensearch&origin=*&search=" + searchTerm + "&formatversion=2&format=json";
    xhr.open('GET',string);
    xhr.onload = function(){
      console.log(xhr.responseText);
    };
    xhr.send();
  }
});

Answer 1

使用e.preventDefault()阻止页面刷新。

 $("#search-input").keyup(function (e) {
      if(e.keyCode==13){
        e.preventDefault();
        console.log('works');
        send();
      }
     });

Answer 2

这种情况正在发生，因为您的form已提交。使用以下代码来防止它。

$("form").submit(function(e){
    e.preventDefault();
});

$(document).ready(function(){
  //clicking search button expands search bar
  $('#search-trigger').on('click',function(e){
    e.preventDefault();
    if(!$('#search-input').hasClass("search-input-open")){
      $('#search-input').addClass('search-input-open');
    }else{
      send();
    }
  });
  
  $("form").submit(function(e){
        e.preventDefault();
    });
  
  //--problem here-- enter button refreshes page instead of executing js
  $("#search-input").keyup(function (e) {
          if(e.keyCode==13){
            console.log('works');
            send();
          }
         });
//click away from search form causes search bar to close
  $(document).on('click', function(e) {
    e.preventDefault();
    if(!$(e.target).is('#search-trigger')&&!$(e.target).is('#search-input')) {
      $('#search-input').removeClass('search-input-open');
    }
  });
  //request function to wikipedia API
  function send(){
    var xhr = new XMLHttpRequest();
    //add precautionary if nothing entered
    var searchTerm = document.getElementById('search-input').value;
    var string = "https://en.wikipedia.org/w/api.php?action=opensearch&origin=*&search=" + searchTerm + "&formatversion=2&format=json";
    xhr.open('GET',string);
    xhr.onload = function(){
      $('#result').text(xhr.responseText);
    };
    xhr.send();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-search ngen-search-form" action="" method "get">
   <input type="text"name="q"id = "search-input"class="form-search 
    input"placeholder="Search keywords..."dir="ltr">
   <span class="glyphicon glyphicon-search form-search-submit" 
     id="search-trigger"aria-hidden="true"></span>
</form>
<div id="result"></id>

Answer 3

您可以通过以下方式停用 Enter键

使用html属性。
```
button_signin_style.xml
```

使用Jquery。

<form ... onkeypress="return event.keyCode != 13;">

如何在不刷新页面的情况下按Enter键？

3 个答案: