autocomplete_item_search_live_1.html.eex

<div class="container">
  <h2>Item search</h2>
  
  <script>
    // we add a global autocomplete function
    // which will handle our client-side logic.
    // we extend this later on...
    function autocomplete() {
      return {
        isOpen: false,
        open() { this.isOpen = true; }
        close() { this.isOpen = false; }
      }
    }
  </script>
  
  <div 
    class="autocomplete" 
    x-data="autocomplete()" 
    @click.away="close" 
  >
    <form phx-submit="submit" phx-change="suggest">
      <div>
        <label for="search">
          Pick some items:
        </label>
        <input 
          id="search-input" 
          name="search" 
          type="text" 
          x-on:focus="open"
          phx-debounce="300" 
          placeholder="Search for an item..." 
        />
      </div>

      <div class="suggestions">
        <%= if Enum.any?(@suggestions) do %>
        <ul 
          id="autocomplete-suggestions" 
          x-show="isOpen" 
          x-ref="suggestions"
        >
          <%= for {item, index} <- Enum.with_index(@suggestions) do %>
          <li 
            id="item-<%= index %>" 
            x-ref="item-<%= index %>" 
            phx-click="select" 
            phx-value-id="<%= item.id %>"
            class="item"
          >
            <img src="<%= item.image_url %>" />
            <span>
              <%= item.name %>
            </span>
          </li>
          <% end %>
        </ul>
        <% end %>
      </div>
    </form>
  </div>
  
  <div>
    <h4>Selected items</h4>

    <div class="selected">
      <%= if Enum.any?(@selected) do %>
      <ul>
        <%= for {item, index} <- Enum.with_index(@selected) do %>
        <li id="selected-item-<%= index %>" class="item">
          <img src="<%= item.image_url %>" />
          <span>
            <%= item.name %>
          </span>
        </li>
        <% end %>
      </ul>
      <% end %>
    </div>
  </div>
</div>