Tengo un formulario de búsqueda y me gustaría que cuando pegue algo en el formulario, lo envíe automáticamente. También me gustaría conservar la funcionalidad, de modo que si no pego algo, y lo escribo manualmente, tengo que presionar el botón Intro/Buscar para que funcione.
Aquí está mi formulario:
<h1 class = "CustomerTitle">Search Tool</h1> <%= form_with url: "/support/search_res", class: "form", method: :get do |form| %> <%= form.text_field :query, class: "input", placeholder: "Search for a user..." %> <%= form.submit "Search", class: "submit_button", id: "pasteSubmit", onpaste: 'pasteAndGo()' %> <% end %> <script> function pasteAndGo() { document.getElementById('pasteSubmit').submit(); } </script>¿Alguien podría decirme por qué esto no funciona?
Editar: he probado el enfoque de Sercan Tırnavalı:
<h1 class = "CustomerTitle">Revuto Customer Support Tool</h1> <%= form_with url: "/support/search_res", class: "form", onpaste: 'pasteAndGo()', method: :get do |form| %> <%= form.text_field :query, class: "input", placeholder: "Search for a user..." %> <%= form.submit "Search", class: "submit_button" %> <% end %> <script> function pasteAndGo() { document.getElementsByClassName('form')[0].submit(); } </script>sin progreso. Cualquier otra idea/solución es apreciada.
Creo que tienes el onpaste en el lugar equivocado. Por favor, intente esto:
<h1 class = "CustomerTitle">Revuto Customer Support Tool</h1> <%= form_with url: "/support/search_res", class: "form", method: :get do |form| %> <%= form.text_field :query, class: "input", placeholder: "Search for a user...", onpaste: 'pasteAndGo()' %> <%= form.submit "Search", class: "submit_button" %> <% end %> <script> function pasteAndGo() { document.getElementsByClassName('form')[0].submit(); } </script>Debe seleccionar el formulario y enviarlo, no el botón.
<script> function pasteAndGo() { document.getElementsByClassName('form')[0].submit(); } </script>También puede usar esta biblioteca js para este tipo de funcionalidad https://select2.org/data-sources/ajax