The select2 item cannot selected - jquery-select2

Question

Why my select2's items cannot be selected.
You can copy my code and save as html, run it by yourself.
And you can see the demo online at http://devhelp.duapp.com/select2/
my html and js code
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<link href="http://cdn.bootcss.com/select2/3.4.5/select2.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/select2/3.4.5/select2.min.js"></script>
<input type="hidden" name="originPlace" value="" />
demo online
<script >
$(document).ready(function() {
$('input[name=originPlace]').select2({
placeholder: "please select country or city",
minimumInputLength: 2,
width: 300,
ajax: {
url: 'http://devhelp.duapp.com/select2/data.php',
dataType: 'jsonp',
data: function(term, page) {
return {query: term,locale:'en-GB'};
},
results: function(data, page) {
if (data.status == 1) {
return {results: data.data.Places};
} else {
return{results: {}};
}
}
},
formatResult: formatSelectSelect,
formatSelection: formatSelectSelect
});
function formatSelectSelect(data){
var liStr = "";
if (data.CityId === "-sky") {
liStr = data.PlaceName + "(ALL)-" + data.PlaceId.replace('-sky', '');
} else {
liStr = data.PlaceName + "[" + data.CountryName + "]-" + data.PlaceId.replace('-sky', '');
}
return liStr;
}
});
</script>

Answer 1

Here is a jsfiddle of it working: http://jsfiddle.net/tk5446/kvLd6/
Just needed to add the "id" entry like so:
id: function(bond){return {id: bond._id};},