Soy un principiante en rieles y estaba buscando una solución para autocompletar en select2 con ajax. Al principio no pude encontrar ninguna pista, luego le pedí a mi mentora que me guiara y ella me dijo el flujo del proceso. Declaré encontrar fragmentos de código en enlaces útiles en el desbordamiento de pila, pero en total me tomó 6 horas de esfuerzos continuos en la búsqueda y depuración y encontré lo que funcionó para mí.

Aquí estoy compartiendo los resultados de mis esfuerzos con la esperanza de ayudar a alguien que vendría a buscar autocompletar. Puede contener algún contenido que necesita ser mejorado.

enunciado del problema: mi tarea era crear un nuevo cupón con nombre y valor. y se pueden seleccionar múltiples productos del menú desplegable para un cupón.

Lo que ya tengo: ya tengo un producto CRUD. ahora tengo que asociarlo con un cupón y mostrar todos los productos en el menú desplegable select2 con una llamada ajax.

Lo que hice: hice la asociación donde los productos pertenecen al cupón y el cupón tiene muchos productos. Ahora, cuando el usuario seleccione productos del menú desplegable para un nuevo cupón, obtendré todas las identificaciones de los productos y actualizaré el nuevo valor de identificación del cupón en ellos.

En la carpeta de cupones en _form.html.erb:
esta es la etiqueta de selección para productos. Tiene id: 'autocompletar' que nos permitirá llamar a ajax en él.

 <div class="mb-3 row"> <%= label_tag 'Products', nil, class: 'col-sm-2 col-form-label'%></br> <div class="col-sm-10"> <%= select_tag 'products',nil, class:"form-control", multiple: true, id: 'autocomplete'%> </div> </div>

en el archivo select2.js: escriba el código para obtener parámetros de la entrada del usuario y pasarlos al controlador para buscar y agregar los resultados buscados a la etiqueta seleccionada.

 document.addEventListener("turbolinks:load", function() { $('#autocomplete').select2({ minimumInputLength: 3, placeholder: 'Search Products', ajax: { url: '/admin/coupons/product_search', dataType: 'json', data: function (params) { return { term: params.term }; }, processResults: function (result) { temp = result.map((obj)=>({text: obj.title, id: obj.id})) $('#autocomplete').append(temp); return { results: temp } } } }); })

encoupon_controller.rb cree una acción llamada "product_search" ya que estamos dando la URL para esto en nuestra llamada ajax.

 def product_search @products = Product.search_products(params[:term]) render json: @products end

en product.rb escriba la función para buscar productos por el valor ingresado por el usuario:

 def self.search_products(term) param = term where('lower(title) ILIKE :term', term: "%#{param.to_s.downcase}%") end

en rutas.rb crea una ruta para esta acción:

 namespace :admin do ... resources :coupons do collection do get 'product_search' end end end

este es el código completo para implementar autocompletar en select2.