39 lines
1.7 KiB
Twig
39 lines
1.7 KiB
Twig
<div {{ attributes }} class="w-full max-w-sm min-w-[200px]">
|
|
<div class="relative">
|
|
<form id="search" action="{{ path('app_search') }}">
|
|
<select
|
|
{{ stimulus_controller('search_bar')|stimulus_controller('symfony/ux-autocomplete/autocomplete', {
|
|
url: path('api_tmdb_ajax_search'),
|
|
create: false,
|
|
tomSelectOptions: {
|
|
highlight: false,
|
|
}
|
|
}) }}
|
|
id="term"
|
|
name="term"
|
|
class="w-full bg-orange-500 rounded-md bg-clip-padding backdrop-filter
|
|
backdrop-blur-md bg-opacity-40 placeholder:text-slate-200 text-gray-50
|
|
text-sm border border-orange-500 rounded-md pl-3 pr-28 py-0 transition
|
|
duration-300 ease focus:outline-none focus:border-orange-400 hover:border-orange-300
|
|
shadow-sm focus:shadow ts-search z-40"
|
|
placeholder="TV Show, Movie..."
|
|
>
|
|
</select>
|
|
<button
|
|
id="search-button"
|
|
class="absolute top-1 right-1 flex items-center rounded
|
|
bg-green-600 py-1 px-2.5 border border-transparent text-center
|
|
text-sm text-white transition-all
|
|
focus:bg-green-700 active:bg-green-700 hover:bg-green-700
|
|
|
|
text-white bg-green-600 text-sm
|
|
border border-green-500
|
|
backdrop-filter backdrop-blur-md bg-opacity-80 z-40
|
|
"
|
|
type="submit"
|
|
>
|
|
Search
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div> |