jquery オートコンプリート カスタム データと表示に取り組んでいます。返されたデータを項目ごとに 2 行で表示する方法がわかりません。ラベルと値、およびオートコンプリートはすべて機能していますが、データの書式設定に助けが必要です。Firefox をチェックインしましたが、item.vcCCQualtsCustomTitle にデータがあります。.data を使用しようとすると、データが表示されないため、item.desc が正しく配線されていないように見えます (成功した場合にマップしたもの)。
ここにコードがあります
$(function () {
$(".cClassID").click(function () {//fires off when you click on the textbox, that the entire textbox gets selected so you don't have to backspace stuff out
$(this).focus();
$(this).select();
});
$(".cClassID").autocomplete({
source: function (request, response) {
$.ajax({
url: "/GeneralUserControls/wsClassIndex.aspx/_ClassIndexSearch_TestOnly",
data: "{ 'ClassIndex': '" + request.term + "' }",//Parm name and what is in the textbox passed in
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.ClassTitle, //map properties used in class returned by JSON to what autocomplete wants
value: item.tblClassIndexID,
desc: item.vcCCQualtsCustomTitle
}
}))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
},
minLength: 3,
select://fires off when you make a selection
function (event, ui) {
//$("#ctl00_ContentPlaceHolder1_ucClassIndex_txtClassIndex").val(ui.item.label);
//$("#ctl00_ContentPlaceHolder1_ucClassIndex_hfClassIndexID").val(ui.item.value);
$("[id$=txtClassIndex]").val(ui.item.label);
$("[id$=hfClassIndexID]").val(ui.item.value);
$("#project-description").html(ui.item.desc);
//AppChanged(ui.item.value);//if JaxIt is not there..there is no error.. it just never runs
return false;
},
focus: function (event, ui) {//what populates the drop down
//$("#ctl00_ContentPlaceHolder1_ucClassIndex_txtClassIndex").val(ui.item.label);
//$("#ctl00_ContentPlaceHolder1_ucClassIndex_hfClassIndexID").val(ui.item.value);
$("[id$=txtClassIndex]").val(ui.item.label);
$("[id$=hfClassIndexID]").val(ui.item.value);
return false;
},
}).data('autocomplete')._renderItem = function (ul, item) {
return $('<li></li>')
.data('item.autocomplete', item)
.append(item.name + item.desc)
.appendTo(ul);
};
});
$("#project-description").html(ui.item.desc); が必要かどうかわかりません。選択:。私が経験した多くの例の1つでそれを見たので、そこに残されています。.data を機能させる方法についてのヘルプは素晴らしいでしょう。
ありがとうシャノン
データ部分は次のようになります
}).data('ui-autocomplete')._renderItem = function (ul, item) {
return $('<li>')
.data("item.autocomplete", item)
.append("<a>" + item.label + "<br/>" + item.desc + "</a>")
.appendTo(ul);
};