javascript - 按 Enter 搜索

Question

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

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

您需要做的就是向您的input 元素添加一个keyup 事件监听器。调用处理程序时，只需检查 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>