vince

[
	{ "keys": [":"], "type": "function", "command": "enter_command_line_mode" },
	{ "keys": ["q"], "type": "prompt", "command": "exit", "cursorPosition": -1 },
	{ "keys": ["/"], "type": "prompt", "command": "search \"\"", "cursorPosition": -2 },

	{ "keys": ["TAB","l"], "type": "function", "command": "focus_next" },
	{ "keys": ["SHIFT_TAB","h"], "type": "function", "command": "focus_previous" },
	{ "keys": ["UP","k"], "type": "function", "command": "move_up" },
	{ "keys": ["DOWN","j"], "type": "function", "command": "move_down" },
	{ "keys": ["PAGE_UP","K","u"], "type": "function", "command": "page_up" },

vince

<div controller="remote-form">
  <%= form_with(url: add_location_to_creature_path(@creature), html: { data: { action: "ajax:success->remote_form#onPostSuccess" }}) do |form| %>
    <div class="mini-form" data-controller="autocomplete" data-autocomplete-url-value="/locations/autocomplete">
        <%= form.text_field :name, class: "mini-input", data: {"autocomplete-target": "input"}, spellcheck: "false", autocomplete: "off", placeholder: "Name:" %>
        <%= form.submit "+", class: "micro-input" %>
        <input type="hidden" name="locationName" data-autocomplete-target="hidden"/>
        <ul data-autocomplete-target="results"></ul>
    </div>
  <% end %>
</div>