4

I am using the select2 plugin and I need to to use the transport-function to perform the ajax request on my own, because I need to set API Keys in the request-header. But as soon as I do this, select2 responses the results correctly and also formats and displays it like I want, but the results shown are not selectable. I can neither click at them, nor navigate to them with the arrow-keys, nor is there any mouseover effect when I go over them with the mouse.

Here's some code (I want to show suggestions for usernames):

ajax: {
    data: function (term, page) {
        return {
            Searchtext: term
        };
    },

    transport: function(queryParams){
        // Api.Ajax delivers { Ajax: *the $.ajax object*, RequestId: *some requestId* }
        var req = Api.Ajax("/api/suggestion/share/" + queryParams.data.Searchtext, "POST", { UserOnly: true }, queryParams.success);

        return req.Ajax;
    },

    // parse the results into the format expected by Select2.
    results: function(resp, page) {
        return {
            results:    resp.Data,
            more:       false
        };
    }
},

Like I said, as soon as I use my own Ajax-function by implementing the transport-function, the results in the dropdown list are all shown, but not selectable.

Is this a bug, or am I doing something wrong?

madth3
  • 7,275
  • 12
  • 50
  • 74
thnew
  • 316
  • 1
  • 3
  • 8
  • Ok, related topics lead me to the solution. There must be set an id-function above ajax. Look at following topic to see the solution: http://stackoverflow.com/questions/14819865/select2-ajax-method-not-selecting – thnew Jun 27 '13 at 06:57
  • 1
    it's my problem too and solved. see this link: [stackoverflow][1] [1]: http://stackoverflow.com/questions/14193463/an-event-is-interfering-with-select2-plugins-ajax-retrieved-results – MHS Dec 04 '13 at 12:38

1 Answers1

-1

@thnew This Answer will show you how to set request headers without requiring the transport function.

Community
  • 1
  • 1
Noel Baron
  • 736
  • 6
  • 17