OSS で利用できる機能
コンボ ボックス - ロードオンデマンド
このサンプルでは、OData データ ソースを使用して、コンボ ボックスのロードオンデマンド機能とページング機能を使用する方法を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
選択した項目
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
項目をフィルターするには、コンボに値を入力します。選択する特定の項目を選択するためにスクロールします。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>
</head>
<body>
<style type="text/css">
.propName { font-weight: bold; border-bottom: 2px dotted Gray; padding-right: 10px; }
.propValue { font-weight: normal; border-bottom: 2px dotted Gray; }
.boxed { border: 1px solid Gray; margin: 3px 3px 3px 3px; padding: 3px 3px 3px 3px; border-radius: 3px; font-weight: bold; }
.dropDownHeaderFooter
{
border: 1px solid Gray;
margin: 3px 3px 3px 3px;
padding: 3px 3px 3px 3px;
border-radius: 3px;
font-weight: bold;
}
#selItemLabel { font-weight: bold; margin: 20px 3px 3px 3px; }
</style>
<div>
<!--Combo Rendering-->
<input id="combo" />
</div>
<div id="itemData">
<!-- Selected item display panel -->
<div id="selItemLabel">選択した項目</div>
<table id="table" class="boxed"></table>
</div>
<script id="selectedItemTemplate" type="text/x-jquery-tmpl">
<tr>
<td class="propName">${ propertyName }</td>
<td class="propValue">${ propertyValue }</td>
</tr>
</script>
<script>
// Helper function to put an item data token to the selected item table utilizing a jQuery template
var selectedItemTemplate = '<tr><td class="propName">${propertyName}</td><td class="propValue">${propertyValue}</td></tr>';
function addItemValue(tableObject, item, itemProp) {
if (!($.isFunction(item[itemProp]))) {
$($.ig.tmpl(selectedItemTemplate,
{
"propertyName": itemProp,
"propertyValue": item[itemProp]
})
).appendTo(tableObject);
}
}
$(function () {
// Hide the selected item div and initialize the selected item row template
$("#itemData").hide();
$("#combo").igCombo({
loadOnDemandSettings: {
enabled: true,
pageSize: 25
},
responseDataKey: "d.results.Results",
responseTotalRecCountKey: "d.results.Count",
dataSource: "https://www.igniteui.com/api/products?callback=?",
width: "400px",
textKey: "ProductName",
valueKey: "ID",
virtualization: true,
autoComplete: true,
headerTemplate: "<div class='dropDownHeaderFooter'>製品</div>",
footerTemplate: "<div class='dropDownHeaderFooter'>製品数: {0} / {3}</div>",
itemTemplate: "<div>${ProductName} (${QuantityPerUnit})</div>",
placeHolder: "製品を選択してください。",
filterExprUrlKey: 'startsWith',
highlightMatchesMode: "startsWith",
filteringCondition: "startsWith",
selectionChanged: function (evt, ui) {
// Clear the selected item table and hide the div
$("#table").empty();
$("#itemData").hide();
// Add selected item data only if an item has been selected
if (ui.items && ui.items[0]) {
// Get the selected item
var itemData = ui.items[0].data;
// Display item's valueKey and textKey settings
addItemValue($("#table"), itemData, ui.owner.options.valueKey);
addItemValue($("#table"), itemData, ui.owner.options.textKey);
// Show the selected item div
$("#itemData").fadeIn(500);
}
}
});
});
</script>
</body>
</html>