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}', '[email protected]');

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', '[email protected]');

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', '[email protected]');
    
  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.