Best IT Recipes

Select2 Ajax Method Not Selecting

Well, I'm sure something is not so simple here, but I'm not 100% what it is.

Therefore, I am trying to use the Select2 AJAX method as a way to search for users in a database and select a result. The call itself returns with the results, however it will not allow me to select an answer from the list. It also does not allow you to “select” it when you hover or the up / down arrow. So, without further ado, here is my code:

index.html

<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="select2/select2.css" media="screen" /> <script src="select2/select2.js"></script> <script src="select.js"></script> </head> <body> <input type="text" style="width: 500px" class="select2"> </body> </html>

select.js

 jQuery(function() { var formatSelection = function(bond) { console.log(bond) return bond.name } var formatResult = function(bond) { return '<div class="select2-user-result">' + bond.name + '</div>' } var initSelection = function(elem, cb) { console.log(elem) return elem } $('.select2').select2({ placeholder: "Policy Name", minimumInputLength: 3, multiple: false, quietMillis: 100, ajax: { url: "http://localhost:3000/search", dataType: 'json', type: 'POST', data: function(term, page) { return { search: term, page: page || 1 } }, results: function(bond, page) { return {results: bond.results, more: (bond.results && bond.results.length == 10 ? true: false)} } }, formatResult: formatResult, formatSelection: formatSelection, initSelection: initSelection }) })

JSON response

 { error: null, results: [ { name: 'Some Name', _id: 'Some Id' }, { name: 'Some Name', _id: 'Some Id' } ] }

Everything seems to be in order, but I can’t actually select the answer and enter it in the field. Is there a problem in my code?

+67
javascript jquery ajax jquery-select2 jquery-select2-3
Feb 11 '13 at 20:02
source share
6 answers

After viewing another answer, it would seem that I also need to go through the id field with each call, otherwise it will disable input.

Example code that fixed it:

 $('.select2').select2({ placeholder: "Policy Name", minimumInputLength: 3, multiple: false, quietMillis: 100, id: function(bond){ return bond._id; }, ajax: { url: "http://localhost:3000/search", dataType: 'json', type: 'POST', data: function(term, page) { return { search: term, page: page || 1 } }, results: function(bond, page) { return {results: bond.results, more: (bond.results && bond.results.length == 10 ? true: false)} } }, formatResult: formatResult, formatSelection: formatSelection, initSelection: initSelection })

Edit

As this continues, I ponder a bit. The .select2 () method expects a unique id field for all results. Fortunately, there is a workaround. The id option accepts this function:

 function( <INDIVIDUAL_RESULT> ) { // Expects you to return a unique identifier. // Ideally this should be from the results of the $.ajax() call. }

Since my unique identifier was <RESULT>._id , I just return <RESULT>._id;

+137
Feb 11 '13 at 20:37
source share

The fact is that the "id" property is required for JSON data. No need for

id: function (bond) {return bond._id; }

If the data does not have an identifier for itself, you can add it using the processResults function, as here.

  $(YOUR FIELD).select2({ placeholder: "Start typing...", ajax: { type: "POST", contentType: "application/json; charset=utf-8", url: "YOUR API ENDPOINT", dataType: 'json', data: function (params) { return JSON.stringify({ username: params.term }); }, processResults: function (data, page) { var results = []; $.each(JSON.parse(data.d), function (i, v) { var o = {}; o.id = v.key; o.name = v.displayName; o.value = v.key; results.push(o); }) return { results: results }; }, cache: true }, escapeMarkup: function (markup) { return markup;}, minimumInputLength: 1, templateResult: function (people) { if (people.loading) return people.text; var markup = '<option value="' + people.value + '">' + people.name + '</option>'; return markup; }, templateSelection: function (people) { return people.value || people.text } });
+10
Jul 23 '15 at 19:05
source share

Also be careful with the case. I used Id , but select2 expects Id . Could save time.

+4
Mar 10 '15 at 15:37
source share

As Dropped.on.Caprica said: Each item in the result needs a unique identifier.

So just give each result id unique number:

 $('#searchDriver').select2({ ajax: { dataType: 'json', delay: 250, cache: true, url: '/users/search', processResults: function (data, params) { //data is an array of results data.forEach(function (d, i) { //Just assign a unique number or your own unique id d.id = i; // or e.id = e.userId; }) return { results: data }; }, }, escapeMarkup: function (markup) { return markup; }, minimumInputLength: 1, templateResult: formatRepo, templateSelection: formatRepoSelection });
+2
May 31 '16 at 10:00
source share

I have a lot of problems regarding the following error. 'Ajax' parameter is not allowed for Select2

In my case, it appears for selection when you use select2 version 3.5, so you have to upgrade to version 4.0 and you will not need the hidden input attached to your choice

+1
Jun 01 '15 at 12:10
source share

enter image description here

You can invoke an option (first in this case) by opening the select2 element programmatically and then calling return .

 var e = jQuery.Event('keydown'); e.which = 13; $('.offer_checkout_page_link select').select2('open'); $('.offer_checkout_page_link .select2-selection').trigger(e);

This will “install” the option as if you clicked on it. You can change this to select a specific option by invoking the appropriate number of down keystrokes before running return .

It seems that if you press (or in this case, press enter ) to select a parameter, the select element is added to the select element. You will notice that the first time the select2 page is select2 , the selection elements do not have option children. This is why other solutions suggest adding an option element using jQuery and then selecting it.

0
Jun 14 '16 at 21:08
source share


More articles:


All Articles