An event is interfering with Select2 plugin's ajax-retrieved results

Question

I'm using Igor Vaynberg's Select2 jQuery plugin with the Infinite Scroll with Remote Data option to make an autocomplete search box for my website. The AJAX is working great and the results are showing up, but they are unselectable -- the change event is never fired and when you click on a result, nothing happens.

There are also no errors showing up in the Chrome console, so I think it's not a syntax error, rather the plugin is mistaking it for a disabled select box. EDIT: having tried a separate on-click event for the result list which never got fired either, I'm now pretty sure there's something interfering with the events.

Here's my code currently,

// Search
$("#site-search").select2({
    placeholder: "Search posts",
    minimumInputLength: 3,
    ajax: {
        url: "http://localhost/mysite/search",
        dataType: 'json',
        quietMillis: 500,
        data: function (term, page) {
            return {
                q: term,
                page_limit: 10,
                page: page // page number
            };
        },
        results: function (data, page) {
            var more = (page * 10) < data.length; // whether or not there are more results available

            // return the value of more to tell if more results can be loaded
            return {results: data, more: more};
        }
    },
    formatResult: function(post) {
        // return html markup for individual result item
        markup = '<img src="'+post.image+'" style="width:40%;float:left;margin-right:5px">';
        markup += '<p>'+post.title+'</p>';
        markup += '<div class="clearfix"></div>';
        return markup;
    },
    formatSelection: function(post) {
        // This shows up in the select box
        return post.title;
    },
    dropdownCssClass: "bigdrop" // apply css that makes the dropdown taller
}).on('change', function(e) {
    try {
        var slug = e.val.slug;
        window.location.href = "http://localhost/mysite/posts/"+slug;
    } catch(error) {
        console.log('Selected search result is invalid: ');
    }
});

The select box itself is just an input with type: hidden

<input type="hidden" class="bigdrop" id="site-search" style="width:100%;height:auto">

Ebba

I tried placing a console.log into the start of the change event, but it was never fired. – Ebba

I tried your code on my local with twitter json api and it worked very well. Maybe, another event listener prevents running this change event listener. Can you show a working example on the internet with a sample of running ajax data? – Crinum

@MuratÇorlu I've made it temporarily live at indiewebseries.com. It's the search bar at the top of the right sidebar. – Ebba

@MuratÇorlu I think you might be right about another event listener somewhere. I've just tried to add a separate jquery onclick event to fire when a result is clicked, and it's not being fired either. Any idea how to find the interfering event? – Ebba

Answer 1

Your problem seems like, your result data doesn't have a property named "id". Select2 plugins wants an id field on data and if it has not, it makes option "unselectable". You may give an id function to override this behavior:

$("#site-search").select2({
   id: function(obj) {
      return obj.slug; // use slug field for id
   },
   ...

Record

I'm checking this out now, I never saw this in the documentation anywhere! – Ebba

That was it! Thank you very much for that. I'll award you the bounty in an hour when it lets me. – Ebba

I found this via a google search for "select2 unselectable" and this absolutely was the fix for my issue...thanks Murat... – Supersonic