0
私はユーザーにgeonames APIとkendoComboBoxを使用して場所を選択させるフォームを用意しています。ただし、ユーザーがリスト内の最初の項目を選択(クリック)すると、実際に項目が選択されることはありません。他の項目を選択して最初の項目を再度選択した場合にのみ、選択が実際に機能します。
他の項目を選択しても、最初の項目はうまくいきます。kendoComboBoxの最初の項目を選択してください
私はそれがなぜそうかもしれないのか、どのように修正できるのか誰にでも指摘できますか?
はここに私のコードです:
<tr>
<td><label>Location:</label></td>
<td><input id="toBeSetByJS" class="locationDisplay" readonly></td>
<td><label>Select Location:</label></td>
<td><input class="locationSelector" id="toBeSetByJS2" type="text">{{ form.location }}</td>
</tr>
<script>
$(".locationSelector").each(function(index) {
// name of hidden input element
var locationInput = $(this).next("input").attr("id");
// set names of selector and display
var locationDisplay = locationInput + "-display";
$(this).parent().prev().prev().children().attr("id", locationDisplay);
var locationSelector = locationInput + "-selector";
$(this).attr("id", locationSelector);
// initialize the location display if necessary
var locationid = $("#" + locationInput).val();
if (locationid != "") {
getLocationName(locationid, locationDisplay);
}
var isocode = $("#isocode").val();
$(this).kendoComboBox({
placeholder: "Select location...",
dataTextField: "name",
dataValueField: "geonameId",
template: '<b>${ data.name }</b>, ${ data.adminName1 }, ${ data.countryName } (${data.fcode})',
filter: "startswith",
dataSource: {
serverFiltering: true,
transport: {
read: {
url: "http://api.geonames.org/searchJSON",
dataType: "jsonp",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
countryBias: isocode,
username: "my.username",
name_startsWith: function() {
return $("#" + locationSelector).data("kendoComboBox").text();
}
}
}
},
schema: {
data: "geonames"
}
},
change: function() {
$("#" + locationDisplay).val(this.text());
$("#" + locationInput).val(this.value());
}
});
});
function getLocationName(geoid, locationDisplayField) {
$.ajax({
url: "http://api.geonames.org/getJSON",
dataType: 'jsonp',
data: {
geonameId: geoid,
style: "full",
username: "my.username"
},
success: function(data) {
//var locName = (data.name + ", " + data.adminName1 + ", " + data.countryName);
$("#" + locationDisplayField).val(data.name);
},
error: function (xhr, textStatus) {
alert('Ooops, geonames server returned: ' + textStatus);
}
});
}
</script>
[このデモ](http://dojo.telerik.com/iQuyo)でこれを簡単にすることができますか? – DontVoteMeDown