Skip to content

Commit 6bfe86f

Browse files
jlukicjlukic
committed
Add additional docs for filterAPIResults
1 parent 5244629 commit 6bfe86f

2 files changed

Lines changed: 129 additions & 255 deletions

File tree

‎server/documents/modules/dropdown.html.eco‎

Lines changed: 129 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1264,90 +1264,6 @@ themes : ['Default', 'GitHub', 'Material']
12641264
;
12651265
</div>
12661266
</div>
1267-
<div class="remote no example">
1268-
<h4 class="ui header">Remote Content</h4>
1269-
<p>Search selection dropdowns can specify <a href="/behaviors/api.html">API settings</a> for retrieving values remotely, this can use either a named API <code>action</code> or <code>url</code>.</p>
1270-
<p class="ignored">Using API can allow users to select choices from large datasets that would be too large to include directly in page markups.</p>
1271-
<p class="ignored">If your backend is not designed to return the correct markup you can use API's <code><a href="/behaviors/api.html#adjusting-server-responses">onResponse</a></code> callback to adjust the format of an API response after it is received from the server.</p>
1272-
<p class="ignored">Requests for the same API endpoints will automatically cached locally, to avoid server roundtrips. You can disable this by adjusting the <code>cache</code> API setting.</p>
1273-
<div class="ui ignored positive message">When a user refreshes the page, selection labels are automatically recreated by using <code>sessionStorage</code> to store the corresponding names for selected values. You can disable this feature by setting <code>saveRemoteData: false</code></div>
1274-
1275-
1276-
<div class="ui form">
1277-
<div class="two fields">
1278-
<div class="field">
1279-
<label>Favorite Animal</label>
1280-
<div class="ui search selection dropdown">
1281-
<input type="hidden">
1282-
<i class="dropdown icon"></i>
1283-
<input type="text" class="search">
1284-
<div class="default text">Select one...</div>
1285-
</div>
1286-
</div>
1287-
<div class="field">
1288-
<label>Favorite Animals</label>
1289-
<div class="ui multiple search selection dropdown">
1290-
<input type="hidden">
1291-
<i class="dropdown icon"></i>
1292-
<input type="text" class="search">
1293-
<div class="default text">Select...</div>
1294-
</div>
1295-
</div>
1296-
</div>
1297-
</div>
1298-
1299-
<div class="evaluated code" data-type="javascript">
1300-
$('.remote.example .ui.dropdown')
1301-
.dropdown({
1302-
apiSettings: {
1303-
url: '//api.semantic-ui.com/tags/{query}'
1304-
}
1305-
})
1306-
;
1307-
</div>
1308-
<div class="code" data-type="JSON">
1309-
// Expected server response
1310-
{
1311-
"success": true,
1312-
"results": [
1313-
{
1314-
// name displayed in dropdown
1315-
"name" : "Choice 1",
1316-
1317-
// selected value
1318-
"value" : "value1",
1319-
1320-
// name displayed after selection (optional)
1321-
"text" : "Choice 1"
1322-
1323-
// whether field should be displayed as disabled (optional)
1324-
"disabled" : false
1325-
1326-
},
1327-
{
1328-
"name" : "Choice 2",
1329-
"value" : "value2",
1330-
"text" : "Choice 2"
1331-
},
1332-
{
1333-
"name" : "Choice 3",
1334-
"value" : "value3",
1335-
"text" : "Choice 3"
1336-
},
1337-
{
1338-
"name" : "Choice 4",
1339-
"value" : "value4",
1340-
"text" : "Choice 4"
1341-
},
1342-
{
1343-
"name" : "Choice 5",
1344-
"value" : "value5",
1345-
"text" : "Choice 5"
1346-
}
1347-
]
1348-
}
1349-
</div>
1350-
</div>
13511267

13521268
<div class="no label example">
13531269
<h4 class="ui header">Text Labels</h4>
@@ -1499,6 +1415,135 @@ themes : ['Default', 'GitHub', 'Material']
14991415
</div>
15001416
</div>
15011417
</div>
1418+
1419+
1420+
<h2 class="ui dividing header">Remote Content</h2>
1421+
1422+
<div class="remote no example">
1423+
<h4 class="ui header">Using Returned API Results</h4>
1424+
<p>Search selection dropdowns can specify <a href="/behaviors/api.html">API settings</a> for retrieving values remotely, this can use either a named API <code>action</code> or <code>url</code>.</p>
1425+
<p class="ignored">Using API can allow users to select choices from large datasets that would be too large to include directly in page markups.</p>
1426+
<p class="ignored">If your backend is not designed to return the correct markup you can use API's <code><a href="/behaviors/api.html#adjusting-server-responses">onResponse</a></code> callback to adjust the format of an API response after it is received from the server.</p>
1427+
<p class="ignored">Requests for the same API endpoints will automatically cached locally, to avoid server roundtrips. You can disable this by adjusting the <code>cache</code> API setting.</p>
1428+
<div class="ui ignored positive message">When a user refreshes the page, selection labels are automatically recreated by using <code>sessionStorage</code> to store the corresponding names for selected values. You can disable this feature by setting <code>saveRemoteData: false</code></div>
1429+
1430+
1431+
<div class="ui form">
1432+
<div class="two fields">
1433+
<div class="field">
1434+
<label>Favorite Animal</label>
1435+
<div class="ui search selection dropdown">
1436+
<input type="hidden">
1437+
<i class="dropdown icon"></i>
1438+
<input type="text" class="search">
1439+
<div class="default text">Select one...</div>
1440+
</div>
1441+
</div>
1442+
<div class="field">
1443+
<label>Favorite Animals</label>
1444+
<div class="ui multiple search selection dropdown">
1445+
<input type="hidden">
1446+
<i class="dropdown icon"></i>
1447+
<input type="text" class="search">
1448+
<div class="default text">Select...</div>
1449+
</div>
1450+
</div>
1451+
</div>
1452+
</div>
1453+
1454+
<div class="evaluated code" data-type="javascript">
1455+
$('.remote.example .ui.dropdown')
1456+
.dropdown({
1457+
apiSettings: {
1458+
// this url parses query server side and returns filtered results
1459+
url: '//api.semantic-ui.com/tags/{query}'
1460+
},
1461+
})
1462+
;
1463+
</div>
1464+
<div class="code" data-type="JSON">
1465+
// Expected server response
1466+
{
1467+
"success": true,
1468+
"results": [
1469+
{
1470+
// name displayed in dropdown
1471+
"name" : "Choice 1",
1472+
1473+
// selected value
1474+
"value" : "value1",
1475+
1476+
// name displayed after selection (optional)
1477+
"text" : "Choice 1"
1478+
1479+
// whether field should be displayed as disabled (optional)
1480+
"disabled" : false
1481+
1482+
},
1483+
{
1484+
"name" : "Choice 2",
1485+
"value" : "value2",
1486+
"text" : "Choice 2"
1487+
},
1488+
{
1489+
"name" : "Choice 3",
1490+
"value" : "value3",
1491+
"text" : "Choice 3"
1492+
},
1493+
{
1494+
"name" : "Choice 4",
1495+
"value" : "value4",
1496+
"text" : "Choice 4"
1497+
},
1498+
{
1499+
"name" : "Choice 5",
1500+
"value" : "value5",
1501+
"text" : "Choice 5"
1502+
}
1503+
]
1504+
}
1505+
</div>
1506+
</div>
1507+
1508+
<div class="remote no example">
1509+
<h4 class="ui header">Using Returned Queryset</h4>
1510+
<p>Ideally API results should only return values <b>matching the passed query term</b> to reduce transmissions over the wire, however as a convenience, you may also return the full set of results from an API endpoint and filter them against the query clientside using the setting <code>filterAPIResults: true</code>.</p>
1511+
<div class="ui form">
1512+
<div class="two fields">
1513+
<div class="field">
1514+
<label>Favorite Animal</label>
1515+
<div class="ui search selection dropdown">
1516+
<input type="hidden">
1517+
<i class="dropdown icon"></i>
1518+
<input type="text" class="search">
1519+
<div class="default text">Select one...</div>
1520+
</div>
1521+
</div>
1522+
<div class="field">
1523+
<label>Favorite Animals</label>
1524+
<div class="ui multiple search selection dropdown">
1525+
<input type="hidden">
1526+
<i class="dropdown icon"></i>
1527+
<input type="text" class="search">
1528+
<div class="default text">Select...</div>
1529+
</div>
1530+
</div>
1531+
</div>
1532+
</div>
1533+
1534+
<div class="evaluated code" data-type="javascript">
1535+
$('.remote.example .ui.dropdown')
1536+
.dropdown({
1537+
apiSettings: {
1538+
// this url just returns a list of tags (with API response expected above)
1539+
url: '//api.semantic-ui.com/tags/'
1540+
},
1541+
filterAPIResults: true
1542+
})
1543+
;
1544+
</div>
1545+
</div>
1546+
15021547
<h2 class="ui header">Menus</h2>
15031548

15041549
<div class="transition example">

‎server/documents/modules/slider.html.eco‎

Lines changed: 0 additions & 171 deletions
This file was deleted.

0 commit comments

Comments
 (0)