2

I'm displaying search suggestions as anchors inside the dropdown of a searchbar. If there's focus-within the .searchbar element, the dropdown is visible. This works when I type the dropdown suggestions by hand but as soon as I use Javascript to generate them, the focus-within stops working.

searchinput.oninput = generateSuggestions;

function generateSuggestions() {
  searchbar_dropdown.innerHTML = '';
  for (suggestion of show_suggestions) {
    const a = document.createElement('a');
    a.src = 'explore.php?search=' + suggestion['suggestion'];
    a.innerText = suggestion['suggestion'];
    searchbar_dropdown.appendChild(a);
  }

  // I tried these two but it isn't working
  window.requestAnimationFrame();
  searchbar_dropdown.offsetHeight;
}
.searchbar:focus-within .suggestions {
  opacity: 1;
  visibility: visible;
  top: 43px;
}
<div class="searchbar float float-up delay05">
  <input type="text">
  <div class="dropdown suggestions"></div>
</div>

Improve this question
6
  • developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
    – Mister Jojo
    Commented Apr 15, 2023 at 22:53
  • stackoverflow.com/help/how-to-ask
    – Mister Jojo
    Commented Apr 15, 2023 at 22:54
  • Your code example seems incomplete. Without a complete example of your code we cannot help you debug your code.
    – Oskar Grosser
    Commented Apr 16, 2023 at 2:11
  • Have you used your browser devtools inspect facility to see exactly the HTML you are creating and compared it to the version you create by hand?
    – A Haworth
    Commented Apr 16, 2023 at 6:30
  • I ran a simple test using your code and one 'suggestion' - the focus worked fine so there may be something that you haven't shown us that is causing the problem. Have you checked the dev tools console for errors?
    – A Haworth
    Commented Apr 16, 2023 at 6:46
Related questions
3356
Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not?
1142
Adding HTML entities using CSS content
1739
Does JavaScript have a method like "range()" to generate a range within the supplied bounds?
Load 4 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.