Laravel 4.1 AutoComplete Field not showing results

Question

Ok, so here's the exact problem that i'm having. I have this autocomplete field and whenever I type anything in it, my console shows me every single record in the table i get my results from, no matter what I type. Below the field, a list of "results" comes up blank, no text in any of the options. Here's my code.

The AutoComplete Field

{{ Form::text('busqueda', '', array('class'=>'ui-widget ui-widget-content ui-corner-all', 'id'=>'busqueda')) }}

The jQuery

$(document).ready(function(){
    $("#busqueda").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "{{URL('ajax/getBooksAutocomplete')}}",
                data: {
                    busqueda: this.term
                },
                success: function (data) {
                    // data must be an array containing 0 or more items
                    console.log("[SUCCESS] " + data.length + " item(s)");
                    //response(data);
                    response( $.map( data, function( item ) {
                        return {
                            label: item.name,
                            value: item.id
                        };
                    }));
                },
            });
        },
    });
});

The Route

Route::get('ajax/getBooksAutocomplete', array('uses'=>'BookController@getBooksAutocomplete'));

The Controller

class BookController extends BaseController {
...
    public function getBooksAutocomplete(){
        $term = Input::get('busqueda');
        $books = array();
        $search = DB::table('books')->where('name', 'LIKE', '%'.$term.'%')->get();
        foreach($search as $results => $book){
            $books[] = array('id'=>$book->id, 'name'=>$book->name);
        }
        return Response::json($books);
    }
...
}

Any help provided will be appreciated.

Answer 1

Check this code it works with me it's simple

<script>
    $(document).ready(function(e) {
        $("#term").autocomplete({
          source: "{{URL('getautocomplete')}}",
          minLength: 2,
          select: function (event, ui) {
            if (ui.item) {
               $("#term").val(ui.item.value);
               this.form.submit();
            }
          }
        });
   });
</script>

Answer 2

Thanks zam, I managed to get to the solution like 2 minutes before I saw your edited post. It turns out the autocomplete using Laravel's Form::text() works different than with Yii's CJuiAutoComplete widget. This is my code now.

The view:

{{ Form::text('busqueda', '', array('class'=>'ui-autocomplete-input ui-widget-content ui-corner-all', 'id'=>'busqueda')) }}
{{ Form::hidden('id_busqueda', '', array('id'=>'id_busqueda')) }}

The controller:

class BookController extends BaseController {
...
    public function getBooksAutocomplete(){
        $term = Input::get('busqueda');
        $books = array();
        $search = DB::table('books')->where('name', 'LIKE', '%'.$term.'%')->get();
        foreach($search as $results => $book){
            $books[] = array('id'=>$book->id, 'value'=>$book->name);
        }
        return Response::json($books);
    }
...
}

The jQuery:

$(document).ready(function(){
    $("#busqueda").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "{{URL('ajax/getBooksAutocomplete')}}",
                data: {
                    busqueda: request.term
                },
                success: function (data) {
                    console.log("[SUCCESS] " + data.length + " item(s)");
                    response(data);
                },
            });
        },
        select: function(event, ui){
            $('#id_busqueda').val(ui.item.id);
        }
    })
});

The Roots of the Problem:

1. I went through one of my Yii projects, and it turns out i DO also return an id and a value, and the value contains the part of the array that I want to show, which in this case would be the "name" of the books in the array.

2. I wasn't taking into account the fact that I'm working with a text field, in which case the value is exactly what is shown in the field, there is no way that the text in the field will be one thing and the value will be another. Before I started thinking straight, I was considering the text field as a dropdown, where the text and the value of the options are two separate things.

3. The reason why the hidden field wasn't taking the value of the chosen option was that I only passing the parameter "item" to the success function, and then putting "item.id" as the value of the hidden field. Now, I still don't understand why I have to pass the "event" parameter, but the "ui" parameter just makes sense, since ui becomes an array of arrays.

Answer 3

have you tried using id, label, value as default array key?

class BookController extends BaseController {
...
    public function getBooksAutocomplete(){
        $term = Input::get('busqueda');
        $books = array();
        $search = DB::table('books')->where('name', 'LIKE', '%'.$term.'%')->get();
        foreach($search as $results => $book){
            $books[] = array('id'=>$book->id, 'label'=>$book->name, 'value'=>$book->id);
        }
        return Response::json($books);
    }
...
}

this should let you use autocomplete with less code at the javascript side.

make the busqueda a hidden field to save the selected autocomplete option and buesqueda2 as the autocomplete. so when you select busqueda2, it will update the hidden input buesqueda with the selected option. so to do this, you add this to the javascript side:

 $("#busqueda2").autocomplete({
  ....
   select: function (event, ui) {
    $('#busqueda2').val(ui.item.label);
    $('#busqueda').val(ui.item.id);
   }
  ....
});

Answer 4

try this, this is not ready code to copy paste, it's just an idea

$(document).ready(function(){
    $("#busqueda").autocomplete(function(){
        $.ajax({
        type: "POST",
        url: "someFileName.pgp",
        data: "searchField="+ui.item['name'];
        }).done(function( result ) {
            $("#someElementToDispalyResult").html(result)
        });
    });
});

EDIT i see now

$(document).ready(function(){
    $("#busqueda").autocomplete(function(){
        $.ajax({
        type: "POST",
        url: "someFileName.pgp",
        data: "searchField="+ui.item['name'];
        }).done(function( result ) {
          var options = eval('(' + result + ')');
          var length = options.length;

            for(var j = 0; j < length; j++)
            {
                var newOption = $('<option/>');
                newOption.attr('value', options[j].id);
                newOption.html( options[j].name); 
                $('#mySelect').append(newOption);
            }


        });
    });
});

just chage names accordingly