The following example code provides type-ahead behavior for entry forms and selecting dropdown values. Type-ahead behavior provides filtered suggestions to the user in the input form. In the screenshot below the user has typed in "A", and so is presented with a dropdown of items that begin with "A".
To use this code, modify the schemaName and queryName properties (which point at the samples.PBMC table in our example). The table you point to will be queried and results will be presented as part of the type-ahead behavior.
<div id="test-input1"></div>
<button onClick="applySelection()">Apply</button>
<br/><br/>
<div id="qwp-view1"></div>
<br/><br/>
<div id="qwp-view2"></div>
<script type="text/javascript" nonce="<%=scriptNonce%>">
function applySelection() {
var selectedValue = document.querySelector('input[name="testInputName"]').value;
new LABKEY.QueryWebPart({
renderTo: 'qwp-view1',
schemaName: 'samples',
queryName: 'PBMC',
viewName: 'View1',
allowChooseView: false,
showImportDataButton: false,
showInsertNewButton: false,
showDeleteButton: false,
frame: 'none',
filters: [LABKEY.Filter.create('RowId', selectedValue, LABKEY.Filter.Types.EQUALS)]
});
new LABKEY.QueryWebPart({
renderTo: 'qwp-view2',
schemaName: 'samples',
queryName: 'PBMC',
viewName: 'View2',
allowChooseView: false,
showImportDataButton: false,
showInsertNewButton: false,
showDeleteButton: false,
frame: 'none',
filters: [LABKEY.Filter.create('RowId', selectedValue, LABKEY.Filter.Types.EQUALS)]
});
}
LABKEY.requiresScript('gen/querySelectInput', function () {
LABKEY.App.loadApp('querySelectInput', 'test-input1', {
schemaName: 'samples',
queryName: 'PBMC',
name: 'testInputName',
maxRows: 100,
});
});
</script>
To use this code, modify the schemaName and queryName properties (which point at the samples.PBMC table in our example). The table you point to will be queried and results will be presented as part of the type-ahead behavior.
