Question

我的自动填充代码运行良好。可以使用鼠标选择列表结果，并使用鼠标悬停。但是我无法通过键盘上的箭头键访问结果。

代码如下：

$(document).ready(function() {
  //generate suggestion on keyup
  $('#keyword').keyup(function(e) {
    e.preventDefault();
    var form = $('#autoForm').serialize();
    $.ajax({
      type: 'POST',
      url: 'search.php',
      data: form,
      dataType: 'json',
      success: function(response) {
        if (response.error) {
          $('#autocomplete').hide();
        } else {
          $('#autocomplete').show().html(response.data);
        }
      }
    });
  });

  //fill the input
  $(document).on('click', '.list-group-item', function(e) {
    e.preventDefault();
    $('#autocomplete').hide();
    var fullname = $(this).data('fullname');
    $('#keyword').val(fullname);
  });
});

.mt20 {
  margin-top: 20px;
}

#autocomplete {
  display: none;
  position: absolute;
  z-index: 30;
  margin-left: 215px;
  width: 405px;
  padding: 2px;
  overflow: hidden;
}

.list-group-item a {
  text-decoration: none !important;
}

.list-group li {
  cursor: pointer;
}

.list-group li:hover {
  color: white;
  background-color: #428bca;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="Search" id="autoForm" class="example" method="post" action="searchprocess.php" style="margin:auto;max-width:500px">
  <input type="text" id="keyword" name="keyword" placeholder="Search.." />
  <button type="submit" name="go"><i class="fa fa-search"></i></button>
</form>
<ul class="list-group" id="autocomplete"></ul>

在我的脚本中，我使用了按键功能。但是我不知道我想念的地方...这些方面的人都可以帮助我解决这个问题。如果您可以重新构建代码并给我，我会更开心的：）预先感谢

无法使用箭头键访问自动完成功能

0 个答案: