Select2: Searching not working with external json file - javascript

0.13) to load a json with country names.
I can show and select the data correctly, but the searching is not working.
Everytime I type something it always returns all the values and not the ones I'm searching for.
This is my code:
$("#reg_afi_nac").select2({
width: '100%',
placeholder: 'Ingrese la nacionalidad',
language: 'es',
ajax: {
url: "<?php echo base_url('assets/json/nacionalidades.json') ?>",
dataType: "json",
type: "POST",
data: function(params) {
return {
q: params.term, // search term
};
},
processResults: function(data) {
return {
results: $.map(data, function(item) {
return {
text: item.text,
id: item.text
}
})
};
},
cache: true,
},
});

Related

jQuery Select2 - get maximum selectable by data attribute

this is html code of my select2 field.
<select data-init-plugin="select2" data-max="4" multiple="" id="mls" name="mls" class="select2 form-control full-width ajax-supported select2-hidden-accessible" data-callback="getAgents" tabindex="-1" aria-hidden="true"></select>
and this is the select2 JavaScript code.
$('.ajax-supported').select2({
ajax: {
dataType: 'json',
multiple: true,
type: "POST",
data: function (term) {
return {
'_token': $('#_token').val(),
name: $(this).attr('name'),
callback: $(this).data('callback'),
q: term.term,
};
},
url: '{{ url('listing-field-ajax-callback') }}',
processResults: function (data) {
return {
results: $.map(data, function (item) {
return {
text: item.itemName,
id: item.id
}
})
};
},
},
minimumInputLength: 1,
maximumSelectionLength: maximum_selectable_items, // this is where i want 4 from data attribute data-max=4
});
now i want to get data attribute data-max = 4 and i want to use it in my maximumSelectionLength and want to control the number of selected items. how can i get data attribute from the select HTML and use that in my JavaScript?
well i tried this code and it worked.
$.each($('.ajax-supported'), function(k, field) {
var max;
console.log(field);
if($(field).data('max')) {
max = parseInt($(field).data('max'));
}
else {
max = 1;
}
$(field).select2({
ajax: {
dataType: 'json',
multiple: true,
type: "POST",
data: function (term) {
return {
'_token': $('#_token').val(),
name: $(field).attr('name'),
callback: $(field).data('callback'),
q: term.term,
};
},
url: '{{ url('listing-field-ajax-callback') }}',
processResults: function (data) {
return {
results: $.map(data, function (item) {
return {
text: item.itemName,
id: item.id
}
})
};
},
},
minimumInputLength: 1,
maximumSelectionLength: max,
});
});

Transforming response data select2 do not working

I use select2 (v4) and use remote data. The response is correct, but processResults function do not call and select2 do not displaying anything.
$('#country').select2({
placeholder: 'Select a country',
minimumInputLength: 3,
ajax: {
url: 'https://battuta.medunes.net/api/country/search/?key=xx',
dataType: 'json',
processResults: function(data) {
var results = [];
$.each(data, function (index, country) {
results.push({
id: country.code,
text: country.name
});
});
return {
results: results
};
},
data: function(params) {
var query = {
country: params.term
}
return query;
}
},
width: 'resolve',
});
Example response from ajax request:
[
{"name": "Indonesia", "code": "Id"},
{"name": "French Polynesia", "code": "pf"}
]
Hi below is the select code for it
$('#country').select2({
placeholder: 'Select a country',
minimumInputLength: 3,
ajax: {
url: function(param){return 'https://battuta.medunes.net/api/country/search/'},
dataType: 'jsonp' ,
data: function (params) {
var query = {
country: params.term,
// callback :"?",
key:"00000000000000000000000000000000" //put your key here
}
//this is important to make sure no extra params are added becuase the api rejects anything that has wrong params
// Query parameters will be ?city=[term]&callback=?,key=
return query;
},
processResults: function(data) {
var results = [];
$.each(data, function (index, country) {
results.push({
id: country.code,
text: country.name
});
});
return {
"results":results
};
},
},
width: 'resolve',
});
and this is my fiddle showing the working country search https://jsfiddle.net/shyamjoshi/jbfrnqLd/37/

Setting values in select2 initial

I need to set default values to the select2 option select which is multiple select and ajax.
Here is the code that i have so far
$("#firstList").select2({
placeholder: "Enter Pincode",
allowClear: true,
cache: true,
initSelection : function (element, callback) {
var data = {id: "IN", text: "INDIA"};
callback(data);
},
ajax: {
url: "../getZipList",
type: "POST",
contentType: "application/json; charset=utf-8",
delay: 250,
data: function (params) {
//console.log(params)
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, page) {
// 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
return {
results: data.items
};
//console.log(data.it)
},
cache: true
},
escapeMarkup: function (markup) {
return markup;
}, // let our custom formatter work
minimumInputLength: 1,
templateResult: formatRepo, // omitted for brevity, see the source of this page
templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
})
When i try this
initSelection : function (element, callback) {
var data = {id: "IN", text: "INDIA"};
callback(data);
},
The initial values didn't set...
I also tried
var data = [{
id: 'value',
text: 'Text to display'
}];
var tags = $("#firstList option").each(function () {
data.push($(this).val());
});
But the initial values are not setting.
What is the problem i am doing and how can i fix it. Help pls

Getting array name of search data in type ahead js

$('#search_restaurant').typeahead({
minLength: 1,
order: "asc",
template: "{{display}} <small style='color:#999;' id={{group}}>{{group}} </small>",
source: {
Restaurant: {
url: ["sqlfiles/search_data.php", "data.country"]
},
Estb: {
url: ["sqlfiles/search_data.php", "data.dish"]
},
Sub: {
url: ["sqlfiles/search_data.php", "data.sub"]
},
Cusines: {
url: [
{
type: "POST",
url: "sqlfiles/search_data.php",
data: {myKey: "myValue"}
},
"data.capital"
]
}
},
});
I am using running coder type ahead js here i am getting the data but what i want is the name of array of the selected data like Restaurant,Estb,Sub,Cusines in a java script variable
callback: {
onClickAfter: function (node, a, item, event) {
// item.group should be what you are looking for
console.log(item)
}
}
});
that's the solution

Select2 TypeError: data.results is undefined

Am trying to use Select2 to load remote data using ajax / json but i keep getting an error as:
TypeError: data.results is undefined
My code is :
$('#tags').select2({
ajax: {
url: 'http://localhost:8090/getallusers',
dataType: 'json',
quietMillis: 100,
data: function (term) {
return {
term: term
};
},
results: function (data) {
return data;
}
}
});
I really Don’t Understand the Problem !
Select2 needs the results as a collection of objects with id: and text: attributes.
Like:
[{ 'id': 1, 'text': 'Demo' }, { 'id': 2, 'text': 'Demo 2'}]
Try, to reformat you response like:
$('#tags').select2({
ajax: {
url: 'http://localhost:8090/getallusers',
dataType: 'json',
quietMillis: 100,
data: function (term) {
return {
term: term
};
},
results: function (data) {
var myResults = [];
$.each(data, function (index, item) {
myResults.push({
'id': item.id,
'text': item.first_name + " " + item.last_name
});
});
return {
results: myResults
};
}
}
});

Categories