3

tengo el siguiente problema, tengo dos campos para autocompletar (nombre de grupo y numero del mismo) y la parte logica funciona correctamente pero no me muestra las coincidencias, como se puede observar los valores aparecen en la consola, pero no en la pagina.

introducir la descripción de la imagen aquí

Este es el codigo en la logica (PHP -Laravel 5.2)

public function groupNumber(){
      $queries = Group::where(function($query){
        $query->where('number','like','%'.Input::get('term').'%');
      })->take(5)->get();
      foreach ($queries as $query) {
        $results[$query->id] = $query->number;
      }
      return response()->json(['item' =>$results]);
    }

Este es el codigo jquery

$('#txtGroupNumber').on('keypress',function(){
    $('#txtGroupNumber').autocomplete({
      source: '../autocomplete/groupNumber',
      minLength:3,
      select: function(event,ui){
        $('#txtGroupNumber').val(ui.item.value);
      }
    });
    $('#txtGroupNumber').data('ui-autocomplete')._renderItem = function(ul,item){
      var $li = $('');
      $li.attr('data-value',item.value);
      $li.append(""+item[1]);
      console.log(item);
      return $li.appendTo(ul);
    }
  });
1
  • en la variable $li = $('<li style="margin-bottom:.5em;">'); Commented el 15 nov. 2016 a las 19:53

2 respuestas 2

5

Tu backend está devolviendo un array asociativo (que javascript interpreta como un objeto) en vez de un array plano (que js interpreta como un array).

Como el autocomplete espera un array, tienes que asegurarte de entregar un array plano desde el backend. Específicamente, si estás usando el autocomplete de jquery-ui, el backend debiera entregar un array de arrays asociativos compuestos de id y value.

public function groupNumber(){
  $queries = Group::where(function($query){
    $query->where('number','like','%'.Input::get('term').'%');
  })->take(5)->get();
  $results=[];
  foreach ($queries as $query) {
    $results[] = ['id'=>$query->id, 'value'=>$query->number];
  }
  return response()->json($results);
}

Tienes otro problema en tu frontend porque estás reinstanciando el autocomplete en cada keypress, cuando el widget de autocomplete de por sí escucha los cambios en el contenido del input.

Esto significa que debiera bastar poniendo simplemente

$('#txtGroupNumber').autocomplete({
  source: '../autocomplete/groupNumber',
  minLength:3,
  select: function(event,ui){
    //$('#txtGroupNumber').val(ui.item.value);
    console.log(ui.item);
  }
});

Y el parámetro select en realidad no necesitas declararlo a menos que el cambio en tu selector gatille cambios en otro input, pero a simple vista no es el caso.

0

Prueba hacerlo así:

  • Modifica tu función groupNumber para que devuelva un arreglo de objetos con propiedades, por ejemplo, con id y number.

    public function groupNumber(){
      $queries = Group::where(function($query){
        $query->where('number','like','%'.Input::get('term').'%');
      })->take(5)->get();
    
      $results = [];
      foreach ($queries as $query) {
        $results[] = array(
          'id'=> $query->id,
          'number'=> $query->number
        );
      }
      return response()->json($results);
    }
    
  • Modifica tu código javascript, para que el autocomplete se inicialice de entrada y que en source utilice un función. Dentro de esta función ejecutamos un 'ajax' para buscar los posibles resultados para el valor ingresado (term). En el success del ajax, hay que formatear los datos a un formato que el autocomplete entienda.

    $("#txtGroupNumber").autocomplete({
      minLength:3,
      source: function(request, response) {
        $.ajax({
          type:"post",
          url: "../autocomplete/groupNumber",
          dataType: "json",
          data: {
            term: request.term
          },
          success: function(data) {
            // Al recibir los datos devueltos, los formateamos
            // de modo que el Autocomplete entienda cual es el valor (`value`)
            // y cual es el texto (`label`) para cada una de las opciones
            var formatted = [];
            $.each(data, function(index, info) {
              formatted.push({
                label: info.number,
                value: info.id
              );
            });
    
            // Le pasamos los datos formateados al Autocomplete
            response(formatted);
          });
        }
      });
    });
    

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.