-3

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>&nbsp;<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.

herboren
  • 37
  • 7
  • 2
    seems to be missing jquery – dandavis Oct 07 '19 at 21:38
  • On top of what dandavis said, your console should show you everything you need to know here. No doubt it will say $ is not defined. – Kai Qing Oct 07 '19 at 21:39
  • Don't comment out the code that you're asking about. – Barmar Oct 07 '19 at 21:40
  • 2
    Typo: `$('#filterteams')` should be `$('.filterteams')`. – Barmar Oct 07 '19 at 21:41
  • `userList.filter()` just returns a new List, it doesn't change the DOM. – Barmar Oct 07 '19 at 21:43
  • As others pointed out, the fiddle doesn't work because you haven't included jQuery. As for filtering your data... what data are we talking about? Give more detail. At this point nobody understands what you mean by it because you're haven't shown the data nor have you defined how you want to filter it. Please add detail. – tao Oct 07 '19 at 21:48
  • I've looked in console but I had no output, seems I was missing JQ lib and using the wrong scope # and should have been using . I just thought the 2k array elements were causing some issues. But it is working now ty everyone – herboren Oct 07 '19 at 21:55

1 Answers1

-1

You didn't include the jQuery library.

Include the following to the <head> section:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Also, you need to put the following change on your script section - you can check the results on this fiddle:

var options = { 
                 valueNames: ['color', 'shade'],
                 item: '<li><span class="color" style="font-weight: bold;"></span>&nbsp;<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); 

// Works
$(document).ready( function() {
  $('.filterteams').on('change', function () {
      var selection = this.value; 
      // filter items in the list
      userList.filter(function (item) {
          return (item.values().color == selection);
      });
  });
});
Hudson Tavares
  • 104
  • 1
  • 2