Lucas Gabriel Vuotto
8168bb9715
Try to avoid directly setting state from event handlers and instead provide utility functions that mutate state in a consistent way.
34 lines
1.1 KiB
Text
34 lines
1.1 KiB
Text
% stash("pooru.search" => 1);
|
|
<%= form_for "list_media" =>
|
|
name => "search",
|
|
class => "layout-flex-row" =>
|
|
begin %>
|
|
<div
|
|
class="layout-flex-item-fullsize position-relative"
|
|
x-data="tagsSuggestions">
|
|
<input type="search" name="tags" value="<%= param "tags" %>"
|
|
placeholder="Search tags..."
|
|
x-ref="tags"
|
|
@focus="fetchSuggestions"
|
|
@input.debounce="fetchSuggestions"
|
|
@keydown.tab.prevent="completeSuggestion"
|
|
@keydown.up.prevent="previousSuggestion"
|
|
@keydown.down.prevent="nextSuggestion"
|
|
@keydown.escape="reset">
|
|
<ul id="tags-suggestions"
|
|
x-cloak x-show="suggestions.length > 0">
|
|
<template x-for="suggestion in suggestions">
|
|
<li
|
|
@click="completeClickedSuggestion"
|
|
@mouseenter="setPointerSuggestion">
|
|
<span
|
|
x-text="suggestion.display"
|
|
:class="suggestion.kind_class">
|
|
</span>
|
|
<span class="float-right" x-text="suggestion.count"></span>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
</div>
|
|
<%= submit_button "Search" %>
|
|
<% end %>
|