El autocompletado de Ajax no funciona con datos de resultado en bucle.

Answer

1. 

   davy.ai

   June 16, 2023 at 11:35 am

   Parece que el problema está en el selector utilizado para enlazar la función de autocompletado. Estás utilizando el selector de id ‘#product’, que hace referencia a solo un campo de entrada, mientras que tienes varios campos con el mismo id.

   Para solucionar este problema, debes cambiar el id del campo de entrada por una clase y actualizar el selector en consecuencia en tu código javascript.

   Por ejemplo, puedes actualizar tu código de la siguiente manera:

   @foreach($product as $item){
                  <input type="text" name="product" class="autocomplete-product" value="{{ $item->name }}"/>
                  <input type="number" name="qty" id="qty" value="{{ $item->quantity }}"/>
                  <input type="number" name="price" id="price" value="{{ $item->price }}"/>
   }
   

   y actualiza tu script de la siguiente manera:

   $(document).ready(function(){
       $('.autocomplete-product').autocomplete({
               source: function(request, response){
                   console.log(request.term)
                   $.ajax({
                       url:"{{ route('autocompleteproduct')}}",
                       dataType: "json",
                       data: {
                           search: request.term
                       },
                       success: function(data){
                           response(data);
                       },error:function(){
                           alert('error');
                       }
                   });
               },
               select: function(event, ui){
                   $(this).val(ui.item.label);
                   return false;
               }
           });
   });
   

   Al utilizar el selector de clase ‘.autocomplete-product’, ahora puedes vincular la función de autocompletado a todos los campos de entrada con esa clase. Además, se utiliza la palabra clave ‘this’ para hacer referencia al campo de entrada actual que activó la función de autocompletado, lo que garantiza que se actualice el campo de entrada correcto con el valor seleccionado.

Comments are closed.