Введите ключ для поиска не работает

Question

Я пытаюсь понять, почему моя функция запуска submit (searchBtn) работает некорректно. Если у вас есть идея о том, что происходит не так, я был бы признателен за помощь!

$(document).ready(function() { 

    //Click searchbtn and run our search 

    $('#searchBtn').click(function() { 
    // Get value of our searchbar that user inputs 
    var searchInput = $('#searchInput').val(); 
    //reset our textbox when search is called 
    $('#searchInput').val(''); 
    //set our search url with the API and searchInput 
    var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchInput + "&format=json&callback=?"; 

     $.ajax({ 
     data: "GET", 
     url: url, 
     async: false, 
     dataType: "JSON", 
     success: function(data) { 

      $('#output').html(''); 
      for (let i = 0; i < data[1].length; i += 1) { 
      $('#output').append("<li><a href=" + data[3][i] + ">" + data[1][i] + "</a><p>" + data[2][0] + "</p></li>"); 
      } 

     }, 
     error: function(errorMessage) { 
      alert("There was a problem retrieving your results."); 
     } 
    }) 

Это функция запуска функции щелчка при отпускании клавиши ввода. Он появляется сразу после примера кода выше.

$('#searchInput').keyup(function(event) { 
     if (event.which === 13) { 
      $('#searchBtn').click(); 
     } 
    }); 
    }); 
}); 

Answer 1

Так я бы это сделал, он удаляет программный щелчок и просто запускает функцию.

$(document).ready(function() { 

    //Click searchbtn and run our search 

    function search() { 
    // Get value of our searchbar that user inputs 
    var searchInput = $('#searchInput').val(); 
    //reset our textbox when search is called 
    $('#searchInput').val(''); 
    //set our search url with the API and searchInput 
    var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchInput + "&format=json&callback=?"; 

     $.ajax({ 
     data: "GET", 
     url: url, 
     async: false, 
     dataType: "JSON", 
     success: function(data) { 

      $('#output').html(''); 
      for (let i = 0; i < data[1].length; i += 1) { 
      $('#output').append("<li><a href=" + data[3][i] + ">" + data[1][i] + "</a><p>" + data[2][0] + "</p></li>"); 
      } 

     }, 
     error: function(errorMessage) { 
      alert("There was a problem retrieving your results."); 
     } 
    } 

$('#searchBtn').click(search); 
$('#searchInput').keyup(function(event) { 
    if (event.which === 13) { 
     search(); 
    } 
}); 
}); 

Answer 2

решаемые с помощью @SethWhite и некоторые люди из/г/learnprogramming со следующим кодом:

$(document).ready(function() { 
    //Click searchbtn and run our search 

    function search() { 
    // Get value of our searchbar that user inputs 
    var searchInput = $('#searchInput').val(); 

    //reset our textbox when search is called 
    $('#searchInput').val(''); 
    //set our search url with the API and searchInput 
    var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchInput + "&format=json&callback=?"; 

     $.ajax({ 
     data: "GET", 
     url: url, 
     async: false, 
     dataType: "JSON", 
     success: function(data) { 

      $('#output').html('').addClass('animated slideInUp'); 

      for (let i = 0; i < 5; i += 1) { 
      $('#output').append("<li><a href=" + data[3][i] + ">" + data[1][i] + "</a><p>" + data[2][i] + "</p></li>"); 
      } 

     }, 
     error: function(errorMessage) { 
      alert("There was a problem retrieving your results."); 
     } 
    }) 
    $('#output').removeClass(); 
    } 
    $('#searchBtn').click(function(event) { 
     event.preventDefault(); 
     search(); 
    }); 
    $('#searchInput').keypress(function(event) { 
    if (event.which == 13) { 
     event.preventDefault(); 
     search(); 
    } 
    }); 
}); 

Использование event.preventDefault(); позаботится об этом, поскольку каждый раз, когда вызывается ajax, мы сбрасываем #seachInput с '', заставляя форму ввода уведомлять вас о пустой форме.