PHP Classes

File: resources/views/livewire/search-dropdown.blade.php

Recommend this page to a friend!
  Classes of Faris AL-Otabi   PHP Movies App   resources/views/livewire/search-dropdown.blade.php   Download  
File: resources/views/livewire/search-dropdown.blade.php
Role: Auxiliary script
Content type: text/plain
Description: Auxiliary script
Class: PHP Movies App
Implement a site about movies using TMDB API
Author: By
Last change:
Date: 8 months ago
Size: 2,111 bytes
 

Contents

Class file image Download
<div class="relative mt-3 md:mt-0" x-data="{ isOpen: true }" @click.away="isOpen = false">
    <input
        wire:model.debounce.500ms="search"
        type="text"
        class="bg-gray-800 rounded-full w-64 px-4 pl-8 py-1 focus:outline-none focus:shadow-outline"
        placeholder="Search ..."
        @focus="isOpen = true"
        @keydown="isOpen = true"
        @keydown.escape.window="isOpen = false"
        @keydown.shift.tab="isOpen = false"
    />
    <div class="absolute top-0">
        <i class="w-4 mt-2 ml-2 text-gray-500 fas fa-search"></i>
    </div>
   
    <div wire:loading class="spinner top-0 right-0 mr-4 mt-4"></div>

        @if (strlen($search) > 2)
        <div
        class="z-50 absolute bg-gray-800 rounded w-64 mt-4"
        x-show.transition.opacity="isOpen"

        >
            @if ($searchResults->count() > 0)
            <ul>
                @foreach ($searchResults as $result)
                <li class="border-b border-gray-700 ">
                    <a
                    href="{{route('movies.show', $result['id'])}}"
                    class="hover:bg-gray-700 px-3 py-3 flex items-center"
                    @if($loop->last)
                        @keydown.tab.exact = "isOpen = false"
                    @endif
                    >
                    @if ($result['poster_path'])
                        <img src="https://image.tmdb.org/t/p/w92/{{ $result['poster_path'] }}" alt="{{
                            $result['title']
                        }}" class="w-8" />
                    @else
                        <img src="https://via.placeholder.com/50x75" alt="{{
                            $result['title']
                        }}" class="w-8" />
                    @endif
                    <span class="ml-4">{{
                        $result['title']
                    }}</span></a>
                </li>
                @endforeach
            </ul>
            @else
            <div class="px-3 py-3">No results found for "{{ $search }}"</div>
            @endif
            </div>
        @endif
   
</div>