Autocomplete [jquery] no muestra datos

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);
    }
  });

3
задан 15.11.2016, 21:52
2 ответа

Твой backend estÃ: возвращая ассоциативный array (который javascript интерпретирует объектом) вместо плоского array (который js интерпретирует array).

Как autocomplete ждет array, ты должен убеждаться вручения плоского array с backend. Espec¦-ficamente, если estÃ: s используя autocomplete jquery-ui, backend был должен вручать array arrays ассоциативные соединения id и 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);
}

у Тебя Есть другая проблема в твоем frontend, потому что estÃ: s reinstanciando autocomplete в каждом keypress, когда widget autocomplete из-за sà - слушает изменения в контенте неудара в лунку.

Это значит, что он должен был быть достаточным помещая просто

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

И parÃ: метр select в действительности ты не нуждаешься в том, чтобы объявить это если только изменение в твоем селекторе не согнет изменения в другом неударе в лунку, но в простой вид это не случай.

4
ответ дан 24.11.2019, 12:35

Протестируй делать это asГ-:

  • Он Изменяет ты funciГіn groupNumber для того, чтобы он возвратил договоренность объектов со свойствами, например, с id и 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);
    }
    
  • Он Изменяет ты cГіdigo javascript, для того, чтобы autocomplete инициализировались ввода, и что в source я использовал один funciГіn. Внутри этой funciГіn мы выполняем 'ajax', чтобы искать возможные результаты для вошедшей стоимости (term). В success ajax, нужно форматировать данные в формат, который autocomplete понимал бы .

    $("#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);
          });
        }
      });
    });
    
0
ответ дан 24.11.2019, 12:35