Hi All,
I have created a dynamic content block in which i have dropdown and a search bar
when i provide some number in the search bar it filters the incidents and shows the related incidents in dropdown.
Is there a way to incorporate both in one as a dropdown containing search
below image is how it looks:
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<div>
<!-- Search input field -->
<input type="text" id="searchInput" placeholder="Search by incident number..." onkeyup="searchLookup()" />
<!-- Lookup select box -->
<select id="lookupSelectBox" name="lookupSelectBox">
<!-- Options will be populated by JavaScript -->
</select>
</div>
<script type="text/javascript">
// Function to fetch data for the lookup based on incident number
function fetchLookupOptions(query) {
var options = [];
var gr = new GlideRecord('incident'); // Adjust table name if needed
if (query) {
gr.addQuery('number', 'STARTSWITH', query); // Search by incident number
}
gr.orderBy('number'); // Optionally, sort results
gr.query();
while (gr.next()) {
options.push({value: gr.sys_id.toString(), label: gr.number.toString()});
}
return options;
}
// Function to populate select box with options
function populateSelectBox(query) {
var selectBox = document.getElementById('lookupSelectBox');
var options = fetchLookupOptions(query);
selectBox.innerHTML = ''; // Clear existing options
var defaultOption = document.createElement('option');
defaultOption.value = '';
defaultOption.text = 'Select an incident';
selectBox.add(defaultOption);
options.forEach(function(option) {
var opt = document.createElement('option');
opt.value = option.value;
opt.text = option.label;
selectBox.add(opt);
});
}
// Function to handle search input
function searchLookup() {
var query = document.getElementById('searchInput').value;
populateSelectBox(query);
}
// Initialize with empty search
populateSelectBox('');
</script>
</j:jelly>Awaiting for replies.
Thanking you,
Appu
