Question

我想，当按下Enter按钮时，应用程序将搜索城市，现在通过按下Search按钮开始操作。下面是我的代码：

const ENTER_KEY_CODE = 13;
document.querySelector('#city').addEventListener('keyup', function(e) {
  if (e.keyCode === ENTER_KEY_CODE) {

        var city = $(this).val();
        if (city !== '') {

            $.ajax({

                url: 'http://api.openweathermap.org/data/2.5/weather?q=' + city + "&units=metric" +
                    "&APPID=bb037310921af67f24ba53f2bad48b1d",
                type: "GET",
                dataType: "json",
                success: function (data) {
                    var widget = show(data);

                    $("#show").html(widget);

                    $("#city").val(' ');
                }

            });

        } else {
            $("error").html('Field cant be empty')
        }

    };
});

Answer 1

您需要做的就是向您的keyup元素添加一个input事件监听器。调用处理程序时，只需检查e.keyCode来查看是否按下了它。如果是这样，请执行您的操作：

const ENTER_KEY_CODE = 13;
document.querySelector('#textEl').addEventListener('keyup', function(e) {
  if (e.keyCode === ENTER_KEY_CODE) {
    var city = $(this).val();
    var url = `http://api.openweathermap.org/data/2.5/weather?q=${encodeURIComponent(city)}&units=metric&APPID=bb037310921af67f24ba53f2bad48b1d`;
    if (city !== '') {
      console.log(`Make ajax call to ${url}`);
      //Make your AJAX call here
    } else {
      console.log('City cannot be blank!');
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="textEl" type="text" />
<div id="error"></div>

Answer 2

这是示例代码，请使用此参考代码。

HTML代码

<input id="InputEnter" >

JavaScript代码

var input = document.getElementById("InputEnter");
input.addEventListener("keyup", function(event) {
  event.preventDefault();
  if (event.keyCode === 13) {
   $(document).ready(function () {

$('#submitWeather').click(function () {

    var city = $("#city").val();
    if (city !== '') {

        $.ajax({

            url: 'http://api.openweathermap.org/data/2.5/weather?q=' + city + "&units=metric" +
                "&APPID=bb037310921af67f24ba53f2bad48b1d",
            type: "GET",
            dataType: "json",
            success: function (data) {
                var widget = show(data);

                $("#show").html(widget);

                $("#city").val(' ');
            }
  }
});

Answer 3

这应该有效。我认为您的ajax请求是正确的。

document.querySelector('#submitWeather').addEventListener('keypress', function(e){
        if(e.which === 13){
            // your ajax request
        }
    })

按Enter进行搜索

3 个答案: