Can't select item

How Do I...
#1

I’m new to select2. Moving over from jquery autocomplete.

So I have everything working perfect. The search works, displays nicely with the image thumbnail…except nothing happens when I click the item I want.

I’m trying to return the name of the category but it’s not working. I could really use someone to point me in the right direction. Thanks

$(".js-data-example-ajax").select2({
    ajax: {
        url: 'index.php?route=catalog/category/autocomplete_v2&user_token={{ user_token }}',
        type: 'post',
        dataType: 'json',
        delay: 250,
        data: function(params) {
            return {
                q: params.term, // search term
                page: params.page
            };
        },
        processResults: function(results, params)
        {
            console.log('processResults results', results);
            // parse the results into the format expected by Select2
            // since we are using custom formatting functions we do not need to
            // alter the remote JSON data, except to indicate that infinite
            // scrolling can be used
            params.page = params.page || 1;

            return {
                results: results.data,
                //pagination:
                //{
                //    more: (params.page * 30) < results.recordsTotal
                //}
            };
        },
        cache: false
    },
    escapeMarkup: function(markup)
    {
        return markup;
    },
    minimumInputLength: 1,
    templateResult: formatCategory,
    templateSelection: function (category) {
        return category.name;
    }
});

function formatCategory(category) {
    if (category.loading)
    {
        return category.text;
    }
    console.log('formatRepo category', category);
    var markup = "<div class='select2-result-categoriessitory clearfix d-flex'>" +
        "<div class='select2-result-categoriessitory__avatar mr-2'><img src='" + category.image + "' class='width-2 height-2 mt-1 rounded' /></div>" +
        "<div class='select2-result-categoriessitory__meta'>" +
        "<div class='select2-result-categoriessitory__title fs-lg fw-500'>" + category.name + "</div>";

    if (category.description_txt)
    {
        markup += "<div class='select2-result-categoriessitory__description fs-xs opacity-80 mb-1'>" + category.description_txt + "</div>";
    }

    markup += "</div></div>";

    return markup;
}
#2

Have you checked the JavaScript console for errors when you try to select an item?

I’m not sure this statement in your code comments is valid:

// since we are using custom formatting functions we do not need to
// alter the remote JSON data […]

The ‘templateResult’ callback function only controls what is displayed in the dropdown, not the internal structure that Select2 needs the data to be in. So if your results.data is not coming back in the exact format that Select2 requires (an array of objects that contain, at minimum, ‘id’ and ‘text’ properties), then it’s likely that is the cause of your not being able to select anything.

1 Like
#3

Okay here is the exact code I’m trying.
Like I said everything is working perfectly except I nothing at all happens when I click an item.

HTML

<div class="form-group">
<label class="form-label" for="input-parent">Parent</label>
<select id="input-parent" data-placeholder="Select a parent category..." class="js-data-example-ajax form-control">
</select>
</div>

JS

$("#input-parent").select2({
    ajax: {
        url: 'index.php?route=catalog/category/getProducts_v2&user_token={{ user_token }}',
        type: 'post',
        dataType: 'json',
        delay: 250,
        data: function(params) {
            return {
                q: params.term, // search term
                page: params.page
            };
        },
        processResults: function(results, params) {
            params.page = params.page || 1;

            // Return in select2 format
            return {
                results: results.data,
                pagination:
                {
                    more: (params.page * 30) < results.recordsTotal
                }
            };
        },
        cache: false
    },
    escapeMarkup: function(markup) {
        return markup;
    },
    minimumInputLength: 1,
    templateResult: formatCategory,
    templateSelection: function (category) {
        return category.name;
    }
});
#4

SOLVED! YAY!

You hit it on the head John.

I had to modify my processResults to reformat it into the format select2 was expecting.

...
processResults: function(json, params) {
    params.page = params.page || 1;

    var results = [];
    $.each(json.data, function(k, v) {
        results.push({
            id: v.category_id,
            text: v.name,
            image: v.image,
            description_txt: v.description_txt
        });
    });

    return {
        results: results,
        pagination:
        {
            more: (params.page * 30) < results.recordsTotal
        }
    };
},
2 Likes