Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
199 views
in Technique[技术] by (71.8m points)

javascript - scroll a div when down or up keys pressed

This is a simple autocomplete search bar that shows suggestions when a user gives input. One can navigate within all the suggestions using down or up arrow keys. But this suggestion box has only 300px of max height. So I had to make it scrollable with the y axis. I want that when a user navigates through suggestions, the div should be scrolled, so the user can navigate through all the suggestions. JS Fiddle

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>     
<body>

<h2>Autocomplete</h2>

<p>Start typing:</p>

<!--Make sure the form has the autocomplete function switched off:-->
<form autocomplete="off" action="/action_page.php">
  <div class="autocomplete" style="width:300px;">
    <input id="myInput" type="text" name="myCountry" placeholder="Country">
  </div>
  <input type="submit">
</form>

</body>
</html>
question from:https://stackoverflow.com/questions/65936521/scroll-a-div-when-down-or-up-keys-pressed

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

If you cannot fix the autocomplete to do this per default then you can do this

https://jsfiddle.net/mplungjan/c3hkfLyq/

document.getElementById("myInput").addEventListener("keydown",function(e) {
  const scroll =  ["ArrowUp","ArrowDown"].includes(e.key)
  const list = document.getElementById("myInputautocomplete-list")
  if (scroll) {
    document.querySelector(".autocomplete-active").scrollIntoView()
  }
})

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...