Autocomplete [jquery] does not show data

Question

Autocomplete [jquery] does not show data

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I have the following problem, I have two fields to autocomplete (group name and number of the same) and the logical part works correctly but it does not show me the coincidences, as you can see the values appear in the console, but not in the page.

This is the code in the logic (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]);
    }

This is the jquery code

$('#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);
    }
  });

jquery php laravel

asked by Edward Bustos 15.11.2016 в 20:52

source

2 answers

Error loading Bootstrap Toggle Button in Table Filter Angular JS by topic

score 2 · Answer 1

Your backend is returning an associative array (which javascript interprets as an object) instead of a flat array (which js interprets as an array).

As the autocomplete expects an array, you have to make sure to deliver a flat array from the backend. Specifically, if you are using the autocomplete of jquery-ui, the backend should deliver an array of associative arrays composed of id and 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);
}

You have another problem in your frontend because you are reinstalling the autocomplete in each keypress, when the autocomplete widget itself listens for changes in the input content.

This means that it should be enough simply by putting

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

And the select parameter does not really need to be declared unless the change in your selector triggers changes in another input, but at first glance is not the case.

score 0 · Answer 2

Try doing it like this:

Modify your groupNumber function to return an array of objects with properties, for example, with id and 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);
}

Modify your javascript code, so that the autocomplete is initialized input and that in source use a function. Within this function we execute an 'ajax' to find the possible results for the value entered ( term ). In success of ajax , you have to format the data to a format that autocomplete understand .

$("#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);
      });
    }
  });
});