<div>
     <div class="dashboard-style" style="position: relative;">
        <input type="text" wire:model.live="search" class="form-control border-1" placeholder="What service are you looking for?">
        @if(!empty($results))
        <ul class="autocomplete-suggestions" style="position: absolute; top: 100%; left: 0; width: 100%; background: white; border: 1px solid #ddd; z-index: 10;">
            @foreach($results as $result)
            <li wire:click="$set('search', '{{ $result->title }}')">
              <a href="{{route('show.service.page', $result->slug)}}">  {{ $result->title }}</a>
            </li>
            @endforeach
        </ul>
        @endif
    </div>
    
    <style>
        .autocomplete-suggestions li {
            padding: 8px;
            cursor: pointer;
        }
    
        .autocomplete-suggestions li:hover {
            background-color: #f0f0f0;
        }
    </style>
</div>