diff --git a/website_generator/.gitignore b/website_generator/.gitignore index 918acc0..d2d367d 100644 --- a/website_generator/.gitignore +++ b/website_generator/.gitignore @@ -4,6 +4,7 @@ !/website_source/index.Rmd !/website_source/dummy.bib !/website_source/images/* +!/website_source/selectKeyword.js # History files .Rhistory diff --git a/website_generator/website_source/index.Rmd b/website_generator/website_source/index.Rmd index 986271a..56c3d21 100644 --- a/website_generator/website_source/index.Rmd +++ b/website_generator/website_source/index.Rmd @@ -53,7 +53,7 @@ DT::datatable(nassa_table_print, ``` - + diff --git a/website_generator/website_source/selectKeyword.js b/website_generator/website_source/selectKeyword.js new file mode 100644 index 0000000..73f0d5a --- /dev/null +++ b/website_generator/website_source/selectKeyword.js @@ -0,0 +1,66 @@ +$(document).ready(function() { + // Verify the table ID by logging it + //console.log('Table ID:', '#nassa_table_container_table'); + + // DataTable instance using the correct ID + var table = $('#nassa_table_container_table').DataTable(); + + // Check if the table is correctly initialized + //if (table) { + // console.log('DataTable initialized successfully.'); + //} else { + // console.log('Failed to initialize DataTable.'); + //} + + const searchInput = document.querySelector('#nassa_table_container input[type="search"]'); + const keywordColumnIndex = 6; // Assuming "Keywords" is the 7th column (0-indexed) + const event = new Event('input', { bubbles: true }); + + // Add click event listener to each badge + $(document).on('click', '.badge', function() { + var keyword = $(this).data('keyword'); + //console.log('Badge clicked, keyword:', keyword); // Debugging output + + // Apply the search filter with the keyword + if (keyword) { + //table.columns().search(keyword).draw(); + // Select the search input within the nassa_table_container + + + // Check if the search input exists + if (searchInput) { + // Set the value to your desired string + searchInput.value = keyword; + + // Apply a custom search to the "Keywords" column + table.column(keywordColumnIndex).search(function(data, type) { + // Check if the data in the "Keywords" column contains the exact keyword + const regex = new RegExp(`(^|,\\s*)${searchTerm}(,|$)`, 'i'); + return regex.test(data); + }); + + // Trigger the input event to apply the search filter immediately + searchInput.dispatchEvent(event); + + table.draw(); // Redraw the table to apply the custom filter + + //console.log('✔️ Search input value has been set successfully!'); + } else { + //console.error('❗ Search input not found within the specified container.'); + } + + searchInput.value = '' + } + }); + + // Optional: Add a button to reset the search filter + //$('.legend').append(''); + // Reset the search filter when 'Show All' is clicked + $(document).on('click', '#resetFilter', function() { + //console.log('Reset button clicked.'); // Debugging output + searchInput.value = '' + searchInput.dispatchEvent(event); + //table.search('').draw(); + }); + }); + \ No newline at end of file