Formatting Select2 JS for remote json data WordPress

Kyle comments:

Thanks for the reply

I put your change in but no results still

Luis Abarca comments:

The json response has some elements not encoded like this:

"ELEMENTS - "Dogs of the Dow" Linked to the DJ High Yield Select TR IndexDODDOD:US",

This quotes will break the json document.

Also, you are trying to get the term as an object.term, but it is an array of strings, maybe you can access them like an array with 0 index.


var index = 0;

formatResult: function(exercise) {

return "<div class='select2-user-result'>" + exercise[index] + "</div>";

},

formatSelection: function(exercise) {

return exercise[index];

},


Then increment the index to get the next element, or you can change the json results to return objects like:


{
results: [
{term: "13D Activist Fund - ADDDAXDDDAX:US"},
{term: "13D Activist Fund - IDDDIXDDDIX:US"},
{term: "1492 Small Cap Growth Fund - InstitutionalFNTGXFNTGX:US"},
]
}


Kyle comments:

Ah you are absolutely right about the dogs "", I fixed that

The whole 'exercise' thing is part of me pulling it out of this demo:[[LINK href="http://jsfiddle.net/LUsMb/16/"]] http://jsfiddle.net/LUsMb/16/[[/LINK]] I'm not sure if I actually need it or not

The formatting I took from [[LINK href="http://stackoverflow.com/questions/16598549/json-format-for-jquery-select2-multi-with-ajax"]]http://stackoverflow.com/questions/16598549/json-format-for-jquery-select2-multi-with-ajax[[/LINK]]

I will start trying your changes, but thought I'd put those two there

Luis Abarca comments:

OK, well, the example, uses the same way to get JSON data, try to replace your current methods and JSON document with the examples i gave you, using data as object is far more easy and readable than using it as arrays.

Kyle comments:

Okay, its getting there. If you can have another look it isn't displaying the results or making a selection

There are more errors in the Json code so I boiled it down to just a couple clean objects to test, but it uses your format

Luis Abarca comments:

Well, if you updated your JSON file, then you dont need an index, just use it as object.term.



jQuery(document).ready(function(){
jQuery( ".gfield_list_2_cell1 input" ).select2(
{
placeholder: "Search for a fund",
minimumInputLength: 1,
ajax: {
url: "http://ktrusak.com/mf3.json",
dataType: 'json',
quietMillis: 100,
data: function(term, page) {
return {
types: ["exercise"],
limit: -1,
term: term
};
},
results: function(data, page ) {
return { results: data.results }
},
formatResult: function(exercise) {
return "<div class='select2-user-result'>" + exercise.term + "</div>";
},
formatSelection: function(exercise) {
return exercise.term;
},
initSelection : function (element, callback) {
var elementText = $(element).attr('data-init-text');
callback({"term":elementText});
}
});
});


Kyle comments:

Perfect, its work now. It won't let me make a selection though, can you tell why?