autocomplete_item_search_live_3.html.eex

<script>
  function autocomplete() {
    return {
      // ...
      
      scrollTo(idx) {
        this.$refs[`item-${idx}`]?.scrollIntoView(false);
      },
      focusNext() {
        const nextIndex = this.focus + 1;
        const total = this.$refs.suggestions?.childElementCount ?? 0;

        if (this.isOpen && nextIndex < total) {
          this.setFocus(nextIndex)
          this.scrollTo(nextIndex);
        }
      },
      focusPrev() {
        const nextIndex = this.focus - 1;

        if (this.isOpen && nextIndex >= 0) {
          this.setFocus(nextIndex);
          this.scrollTo(nextIndex);
        }
      },
      
      // ...
    }
  }
</script>

<!-- 
  add the following attributes to the 
  autocomplete div container
-->
<div
  x-on:keydown.arrow-up="focusPrev"
  x-on:keydown.arrow-down="focusNext"   
/>