I have a Selection box I am trying to get working, I want to filter the List I have based on the option selected from the selection box. Not sure if this is relevant, but my userList has about 2,000 contacts in the list, so due to PII I have removed a lot of data and replaced it with more simpler descriptions. The list filter works up to the point of typing within the input box, but even if I put a working script in, I am getting no response within the code.
The selection box does not filter the data just as the input text would. I followed the URL here and here, and have come up empty handed. The second link works, but I am looking for a jQuery solution, not a JS solution.
When I tried a working JQuery script, nothing happened, I figured maybe it was my code or I typed it wrong, but I still had no response even it was functional code. Then I removed the functional code and inserted a breakpoint 'alert()' and the alert popped up! I'm scratching my head at this point and just gave up for the day. Losing my mind why functional code wont execute.
What I have tried has been commented out in the code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Autofill Assignee Search Tool</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script> </head>
<body>
<div id="assignees">
<input type="text" class="search" id="filter" placeholder="Search" />
<select class="filterteams" name="teams">
<option value="" selected disabled hidden>Choose Team</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
</select>
<div id="results">
<ul class="list"></ul>
</div>
</div>
<script>
var options = {
valueNames: ['color', 'shade'],
item: '<li><span class="color" style="font-weight: bold;"></span> <span class="shade" style="font"></span>'
};
var values = [
{
color: 'red',
shade: 'gray'
},
{
color: 'yellow',
shade: 'white'
},
{
color: 'blue',
shade: 'black'
}];
var userList = new List('assignees', options, values);
/*
// Doesn't Work
$('#filterteams').change(function () {
var selection = this.value;
// filter items in the list
userList.filter(function (item) {
return (item.values().color == selection);
});
});
// Doesn't Work
$(document).ready(function(){
$("select.filterteams").change(function(){
var selectedColor = $(this).children("option:selected").val();
alert("You have selected the color: " + selectedColor);
});
});
*/
// Of course this works
alert();
</script>
</body>
</html>
Nothing happens when I change option in the selection box. It does not filter the results between both jquery examples. Yet my alert() works just fine.