I'am using select2 version 3.4.6.
Iam having some trouble getting the data to the input field, here's my html:
<div class="col-md-5">
<input id="assetTypes" name="assetTypes" class="form-control input-xlarge" placeholder="" />
</div>
The backend returns te following output:
[{"name":Server,"id":1},{"name":Database,"id":2}]
And the js is as follows:
$("#assetTypes").select2({
ajax: {
url: "/assets/getAssetTypes",
dataType: 'json',
type: "GET",
data: function (term) {
return {
term: term
};
},
results: function (data) {
return {
results: $.map(data, function (obj) {
return {
text: obj.name,
id: obj.id
}
})
};
}
}
});
I don't get any errors in the chrome js console, but as I type, the spinner just keeps spinning without returning any data.
Any suggestions to what the problem might be?
For your map call, change the function declaration from function() to function(obj) and then use:
text: obj.name,
id: obj.id
Related
I need to pass value from select2 to javscript. But its not working.
this is my html code
<select class="txtTeamAddDelete form-control" name="itemName"></select>
</div>
<button type="button" class="btnrowAddDelete">Add New Row</button>
This is my javascript select2
<script type="text/javascript">
$('.txtTeamAddDelete').select2({
placeholder: 'Select an item',
ajax: {
url: "{{route('meeting.list-meeting.dataAjax')}}",
dataType: 'json',
delay: 250,
processResults: function (data) {
return {
results: $.map(data, function (item) {
return {
text: item.name,
id: item.id,
email: item.email
}
})
};
},
cache: true
}
});
</script>
this is js for display select2 data
$(document).ready(function(){
$('.btnrowAddDelete').click(function(){
var txtTeamAddDelete = $('.txtTeamAddDelete').find(':selected').text();
$('.TableAddDelete tbody').append("<tr><td>"+txtTeamAddDelete+"</td><td>"+email+"</td></tr>");
});
});
its working to fetch name data but not email. I want to fetch two data: email & name. i already tried this
var txtTeamAddDelete = $('.txtTeamAddDelete').select2('val',["name", "email"]);
but it return undefined
i want to show it like this. can someone help me. Thanks!
I am new to select2 plugin, my problem is,
I want to put a job search option to my web page that is when user queries with keyword php then it will return corresponding data as json. For example if user enters java then it will return most possible words like java, javascript, java.net and user can pick up one or more item from the list displayed.
i did but there is no select option
script
$(".load").select2({
minimumInputLength: 2,
ajax: {
url: "http://localhost/testserver/Test",
dataType: 'json',
type: "post",
data: function (term, page) {
return {
q: term
};
},
processResults: function (data, page) {
console.log(data);
return {
results: $.map(data, function (item) {
return {
text: item.Name,
}
})
};
}
},
});
html
<select class="load" style="width:400px;">
Find below Complete solution
$(document).ready(function() {
$(".load").select2({
minimumInputLength: 2,
ajax: {
url: "http://ip.jsontest.com/",
dataType: 'json',
type: "post",
data: function (term, page) {
return {
q: term
};
},
processResults: function (data, page) {
return {
results: $.map(data, function (item) { console.log(item);
return {
text: item
}
})
};
}
},
});
});
I have pointed url to some other location for dynamic data..Please make changes accordingly
This is my code. Callback function shows undefined value.In image You can see I am getting undefined values which are initially fetched from database
THis is HTML
<input type="text" name="city[]" class="itemSearch form-control" id="city_dropdown" value='{{$cities}}'>
PHP CODE:
$cities = $this->city->select('city_name', 'id')->whereIn('id', $city)->get()->toArray();
$cities = json_encode($cities);
I get this [{"city_name":"Badarpur Railway Town","id":321},{"city_name":"Bahbari Gaon","id":322}] in $cities. which is a value of HTML text box.
$("#city_dropdown").select2({
minimumInputLength: 2,
tags: [],
ajax: {
url: adminPath+"pincode/getcitydropdown",
dataType: 'json',
type: "GET",
quietMillis: 50,
data: function (term) {
return {
term: term
};
},
results: function (data) {
return {
results: $.map(data, function (item) {
return {
text: item.city_name,
id: item.id
}
})
};
}
}, initSelection : function (element, callback) {
var elementText = $(element).attr('value');
callback(JSON.parse(elementText));
}
});
I'm using Select2 Ajax to apply autocomplete on my html select
this is the select2 code :
<script>
$(function(){
$(".marques-multi").select2({
minimumInputLength: 3,
tags: [],
ajax: {
url: "user/marques",
dataType: 'json',
type: "GET",
quietMillis: 50,
data: function (term) {
return term;
},
processResults: function (data) {
return {
results: data
};
},
transport: function (params, success, failure) {
var $request = $.ajax(params);
$request.then(success);
$request.fail(failure);
return $request;
}
}
});
});
</script>
and this is my html :
<select class="form-control input-sm marques-multi" name="marque"></select>
and this is what the URL : "user/marques" with the data (www.mywebsite.com/user/marques/marques?term=nike) returns :
[
{"id_marque":"50670","marque_name":"NIK HUBER GUITARS"},{"id_marque":"50671","marque_name":"NIKALAS CATLOW"},{"id_marque":"1","marque_name":"NIKE"},{"id_marque":"50672","marque_name":"NIKE"},
{"id_marque":"50673","marque_name":"NIKE"},{"id_marque":"50674","marque_name":"NIKE 6.0"},{"id_marque":"50675","marque_name":"NIKE ACCESSORIES"},{"id_marque":"50676","marque_name":"NIKE ACG"},{"id_marque":"50677","marque_name":"NIKE ACTION SPORTS"},{"id_marque":"50678","marque_name":"NIKE AIR MAX"},{"id_marque":"50679","marque_name":"NIKE BAIN"}
]
when I write as example nik in the select input i see in the console that the requests returns this json bellow with no errors but the select doesn't get fill with this data it stays blank.
If possible, change your data properties on JSON from id_marque and marque_name to id and text instead.
So from:
[
{"id_marque":"50670","marque_name":"NIK HUBER GUITARS"},{"id_marque":"50671","marque_name":"NIKALAS CATLOW"},{"id_marque":"1","marque_name":"NIKE"},{"id_marque":"50672","marque_name":"NIKE"},
{"id_marque":"50673","marque_name":"NIKE"},{"id_marque":"50674","marque_name":"NIKE 6.0"},{"id_marque":"50675","marque_name":"NIKE ACCESSORIES"},{"id_marque":"50676","marque_name":"NIKE ACG"},{"id_marque":"50677","marque_name":"NIKE ACTION SPORTS"},{"id_marque":"50678","marque_name":"NIKE AIR MAX"},{"id_marque":"50679","marque_name":"NIKE BAIN"}
]
To:
[{"id":"50670","text":"NIK HUBER GUITARS"},{"id":"50671","text":"NIKALAS CATLOW"},{"id":"1","text":"NIKE"},{"id":"50672","text":"NIKE"},
{"id":"50673","text":"NIKE"},{"id":"50674","text":"NIKE 6.0"},{"id":"50675","text":"NIKE ACCESSORIES"},{"id":"50676","text":"NIKE ACG"},{"id":"50677","text":"NIKE ACTION SPORTS"},{"id":"50678","text":"NIKE AIR MAX"},{"id":"50679","text":"NIKE BAIN"}];
Fiddle
I have the following code which should be getting data via AJAX using Select2
$('#Organisation').select2({
ajax: {
url: AppURL + 'Organisations/Manage/SearchByName/',
dataType: 'json',
quietMillis: 100,
data: function (term) {
return {
term: term
};
},
results: function (data) {
return {
results: data
};
}
}
});
If I look at the request using Web Inspector when searching 'O' I get:
[{"label":"Organisation 1","ID":2},{"label":"Organisation 2","ID":1}]
Any ideas what I'm doing wrong? I'd presume something incorrect in the results function.
The error I get is: Uncaught TypeError: Cannot call method 'toUpperCase' of undefined
Try
$('#Organisation').select2({
ajax: {
url: 'data.json',
dataType: 'json',
quietMillis: 100,
data: function (term) {
return {
term: term
};
},
results: function (data) {
var results = [];
$.each(data, function(index, item){
results.push({
id: item.ID,
text: item.label
});
});
return {
results: results
};
}
}
});
Demo: Plunker
Other than above solution you can do one thing, instead of returning following json
[{"label":"Organisation 1","ID":2},{"label":"Organisation 2","ID":1}]
return this
[{"text":"Organisation 1","id":2},{"text":"Organisation 2","id":1}]
faced the same problem and figured this out after looking at few solutions proposed by other.