EZ initial struct - cascade select - using mdc3

EZ initial struct - cascade select - using mdc3

by pj_js15

HTML

<script src="https://dnasir.com/jquery-cascading-dropdown/dist/jquery.cascadingdropdown.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta content="initial-scale=1, shrink-to-fit=no, width=device-width" name="viewport">

    <!-- CSS -->
    <!-- Add Material font (Roboto) and Material icon as needed -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i|Roboto+Mono:300,400,700|Roboto+Slab:300,400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <!-- Add Material CSS, replace Bootstrap CSS -->
    <link href="https://raw.githubusercontent.com/Daemonite/material/master/css/material.min.css" rel="stylesheet">
    <title>Standard Srch</title>
  </head>

  <body>
        
    
    
    
  <div class="container">
      <div id="standard-search" class="row">
       
        <div class="col s3">
          <div class="input-field">
            <label>Make</label>
            <input placeholder="Filter" id="car-make-filter" type="text" 
              class="validate browser-default">
            <i class="material-icons prefix right grey-text text-lighten-3">search</i>
          </div>  
          <div class="">            
            <select id="car-makes-list" class="step1 browser-default listbox-10" size="10">
              <option value="" disabled="" selected="">- Popular makes -</option>
              <!--<option value="1">TOYOTA</option>
              <option value="2">HYUNDAI</option>
              <option value="3">SUBARU</option>
              <option value="4">FORD</option>
              <option value="5">BMW</option>
              <option value="6">AUDI</option>
              <option value="7">HOLDEN</option>
              <option value="8">LDV</option>
              <option value="9">MERCEDES</option>
              <option value="10">SUZUKI</option>
              <option...

SCSS

/*@import "materialize/components/color-variables";

$primary-color: color("blue", "lighten-2") !default;
$secondary-color: color("yellow", "base") !default;
$input-focus-color: color("red", "base") !default;
*/
$primary-color: #2680EB;

input.browser-default{
  background-color: rgba(255,255,255,0.9);
    width: 100%;
    padding: 5px;
    border: 1px solid #f2f2f2;
    border-radius: 2px;
    height: 3rem;
}

nav{
  &.main-nav{
//    background-color: #282F34;
      background-image: linear-gradient(to right, #282F34, #005B9C 70%, #005B9C);

    -webkit-box-shadow: 0 1px 0px 0 rgba(0,0,0,0.14), 0 0px 0px 0px rgba(0,0,0,0.12), 0 0px 0px 0 rgba(0,0,0,0.2);
    box-shadow: 0 1px 0px 0 rgba(0,0,0,0.14), 0 0px 0px 0px rgba(0,0,0,0.12), 0 0px 0px 0 rgba(0,0,0,0.2);

  }
  
  &.main-nav2{
    background-color: #FFF;
    -webkit-box-shadow: 0 1px 0px 0 rgba(0,0,0,0.14), 0 0px 0px 0px rgba(0,0,0,0.12), 0 0px 0px 0 rgba(0,0,0,0.2);
    box-shadow: 0 1px 0px 0 rgba(0,0,0,0.14), 0 0px 0px 0px rgba(0,0,0,0.12), 0 0px 0px 0 rgba(0,0,0,0.2);

  }
  
  ul{
      
    li{
      & > a:hover{
        background-color: unset;
        height: 60px;
        
        &.user-account{
          border: 1px solid #7fa2ba;
        }
      }
    
      &.active{
        height: 1px;
        background-color: transparent;
        
        &:after{
          content: '';
          position: relative;
          width: 0;
          height: 0;
          left: 0;
          top: -50px;
          border-left: 10px outset transparent;
          border-right: 10px solid transparent;
          border-bottom: 10px solid #eeeeee ;
        }
        
        a{
          color: #2680EB !important;      
        }
      }
    }
  }
  
  .cart-total{
    vertical-align: top;
  }
  
  .dropdown-content {
    top: 100% !important;
  }
}


//change focus color
input:not([type]):focus:not([readonly]), input[type=text]:not(.browser-default):focus:not([readonly]),...

JavaScript

$(document).ready(function() {
  M.updateTextFields();

  $(".dropdown-trigger").dropdown();

  $('select').formSelect();

  $('.collapsible').collapsible();
  
  $('#car-make-filter').on('keyup', function(){
  	filterSelect($(this).val(), '#car-makes-list');
  });
  
  
  function filterSelect(strKey, selectId){  	
    $(selectId).find('option').each(function(index,element){    	 
       if(element.text.toLowerCase().indexOf(strKey.toLowerCase()) >= 0){
       	$(this).show();
       }else{
       	$(this).hide();
       }       
  	});
  }
		
$('#standard-search').cascadingDropdown({
  selectBoxes: [
		{
      selector: '.step1',
      //selected: '4'
      source: [
        { label: 'TOYOTA', value: 1 },
        { label: 'HYUNDAI', value: 2 },
        { label: 'SUBARU', value: 3 },
        { label: 'FORD', value: 4 },
        { label: 'BMW', value: 5 },
        { label: 'HOLDEN', value: 6 },
      ],
      onChange: function(event, value, requiredValues, requirementsMet){
        console.log('calling API to populate step2');
      }
    },
    {
      selector: '.step2',
      requires: ['.step1'],
      onChange: function(event, value, requiredValues, requirementsMet){
        console.log('calling API to populate step3');
      }
    },
    {
      selector: '.step3',
      requires: ['.step1', '.step2'],
      onChange: function(event, value, requiredValues, requirementsMet){
        console.log('calling API to populate SEARCH RESULTS');
      }
    }
  ],
  onReady: function(){
  	$('.filter-box').attr('disabled', true);
  }
        
});



});