Integrating Select2 with Laravel 4 App-Collection of common programming errors

I’ve decided to implement select2 in my multiselect search filter and I could do with some help integrating it.

I have the following method:

public function getContactByName($name)
{
    return Contact::select(array('id', DB::raw('concat(first_name," ",last_name) as name')))->where(DB::raw('concat(first_name," ",last_name)'), 'like', "%$name%")->get();
}

This method returns any records where ‘first_name’ and ‘last_name’ are like the term entered in the URL, for example http://www.example.com/admin/get-contact-name/{name}.

The following route handles the request:

Route::get('admin/get-contact-name/{name}', 'AdminContactListController@getContactByName');

This all works great. I just need some help setting it up with select2 and AJAX. I’m not really sure what to put in the options for the JS.

I have the following form field setup:

Can anyone point me in the right direction. Cheers.

EDIT: I’m sort of playing about here and shooting in the dark, as I’m not sure what each of these elements mean, such as page etc but this is the code I have so far, suffice to say it’s not working:

var name = $('#contact_names_value').val();
$('#contact_names_value').select2({
    placeholder: 'Search contacts',
    minimumInputLength: 3,
    ajax: {
        url: '/admin/get-contact-name' + name,
        dataType: 'json',
        data: function (term, page) {
            return {
                q: term,
                page_limit: 10
            };
        },
        results: function (data, page) {
            return {results: data};
        }
    },
});

EDIT: OK guys, I think I’m much closer, and I think I’m getting results via select2 now but I’m getting a JavaScript error. Here’s what I have so far.

Method:

public function getContactByName()
{
    $name = Input::get('name');
    return Contact::select(array('id', DB::raw('concat(first_name," ",last_name) as name')))->where(DB::raw('concat(first_name," ",last_name)'), 'like', "%$name%")->get();
}

Route:

Route::get('admin/get-contact', 'AdminContactListController@getContactByName');

Select2 JavaScript:

$('#contact_names_value').select2({
    name: $('.select2-input').val(),
    placeholder: 'Search contacts',
    minimumInputLength: 3,
    ajax: {
        url: '/admin/get-contact' + name,
        dataType: 'json',
        data: function (term) {
            return {
                name: term
            };
        },
        results: function (data) {
            return {results: data};
        },
        dropdownCssClass: 'bigdrop'
    },
});

Select2 JS Error:

Uncaught TypeError: Cannot call method 'toUpperCase' of undefined plugins.js:1549
C plugins.js:1549
a.fn.select2.defaults.formatResult plugins.js:1550
g plugins.js:1549
a.extend.populateResults plugins.js:1549
f.query.callback plugins.js:1549
(anonymous function) plugins.js:1549
a.extend.success plugins.js:1549
c jquery-1.9.1.min.js:3
p.fireWith jquery-1.9.1.min.js:3
k jquery-1.9.1.min.js:5
r

Any advice guys?

1. OK, I have this working like a charm now.

   Here’s my JS code:

   $('#contact_names_value').select2({
       placeholder: 'Search contacts',
       minimumInputLength: 3,
       ajax: {
           url: '/admin/get-contact',
           dataType: 'json',
           data: function (term, page) {
               return {
                   contact_names_value: term
               };
           },
           results: function (data, page) {
               return {results: data};
           }
       },
       tags: true
   });
   

   I did not need the ‘name’ variable reference, as the plugin handles this and appends the value of the select/input to the query string.

   Secondly, in my form, I needed to set the type to ‘hidden’, as previously it was text.

   You’ll also notice above that I added ‘page’ to both the results and data functions. Not sure if this made a difference.

   I also added ‘tags: true’ to make it work like a multiselect.

   Here’s my method code:

   public function getContactByName()
   {
       $name = Input::get('contact_names_value');
       return Contact::select(array('id', DB::raw('concat(first_name," ",last_name) as text')))->where(DB::raw('concat(first_name," ",last_name)'), 'like', "%$name%")->get();
   }
   

   Notice during my select statement, I do a DB::raw and set the ‘first_name’ and ‘last_name’ fields to be selected as ‘text’. I think this was one of the major issues, as the plugin requires ‘id’ and ‘text’ to function.

   My route was simply:

   Route::get('admin/get-contact', 'AdminContactsController@getContactByName');
   

2. You simply grab the input box (e.g. using jQuery you can do $(‘#contact_names_value’) or javascript is document.getElementById(‘contact_names_value’).)

   An example that should work:

   $('#contact_names_value').select2(your_value_from_getContactByName_method_here);
   

   Hope that helps.