Feat : use text input for filtering of exclude_list & include_list (#69)

* Change input box logic from selection to filtering

* Change user input logic from going to filtering

* Update scripts/include_list.php

Co-authored-by: Nachtzuster <Nachtzuster@users.noreply.github.com>

* Multiple size reverted to 25 ; typo "ol" removed

https://github.com/Nachtzuster/BirdNET-Pi/pull/69

* Re-add dummy "Please select"option

* Update include_list.php

* Align with "option disabled"

* Update scripts/exclude_list.php

thanks

Co-authored-by: Nachtzuster <Nachtzuster@users.noreply.github.com>

---------

Co-authored-by: Nachtzuster <Nachtzuster@users.noreply.github.com>
This commit is contained in:
Alexandre
2024-05-22 11:32:26 +02:00
committed by GitHub
parent e0e5aff081
commit b07c28bbfb
2 changed files with 84 additions and 73 deletions
+51 -5
View File
@@ -19,8 +19,8 @@ $eachlines = file($filename, FILE_IGNORE_NEW_LINES);
<div class="customlabels2 column1">
<form action="" method="GET" id="add">
<h2>All Species Labels</h2>
<select name="species[]" id="species" multiple size="30">
<option selected value="base">Please Select</option>
<input autocomplete="off" size="18" type="text" placeholder="Search Species..." id="species_searchterm" name="species_searchterm">
<select name="species[]" id="species" multiple size="25">
<?php
foreach($eachlines as $lines){echo
"<option value=\"".$lines."\">$lines</option>";}
@@ -44,8 +44,8 @@ $eachlines = file($filename, FILE_IGNORE_NEW_LINES);
<div class="customlabels2 column3">
<form action="" method="GET" id="del">
<h2>Custom Species List</h2>
<select name="species[]" id="value2" multiple size="30">
<option selected value="base">Please Select</option>
<select name="species[]" id="value2" multiple size="25">
<option disabled value="base">Please Select</option>
<?php
$filename = './scripts/include_species_list.txt';
$eachlines = file($filename, FILE_IGNORE_NEW_LINES);
@@ -59,4 +59,50 @@ $eachlines = file($filename, FILE_IGNORE_NEW_LINES);
<button type="submit" name="view" value="Included" form="del">REMOVE</button>
</div>
</div>
</body>
<script>
// Store the original list of options in a variable
var originalOptions = {};
document.getElementById("add").addEventListener("submit", function(event) {
var speciesSelect = document.getElementById("species");
if (speciesSelect.selectedIndex < 0) {
alert("Please click the species you want to add.");
document.querySelector('.views').style.opacity = 1;
event.preventDefault();
}
});
var search_term = document.querySelector("input#species_searchterm");
search_term.addEventListener("keyup", function() {
filterOptions("species");
});
// Function to filter options in a select element
function filterOptions(id) {
var input = document.getElementById(id + "_searchterm");
var filter = input.value.toUpperCase();
var select = document.getElementById(id);
var options = select.getElementsByTagName("option");
// If the original list of options for this select element hasn't been stored yet, store it
if (!originalOptions[id]) {
originalOptions[id] = Array.from(options).map(option => option.value);
}
// Clear the select element
while (select.firstChild) {
select.removeChild(select.firstChild);
}
// Populate the select element with the filtered labels
originalOptions[id].forEach(label => {
if (label.toUpperCase().indexOf(filter) > -1) {
let option = document.createElement('option');
option.value = label;
option.text = label;
select.appendChild(option);
}
});
}
</script>