Bookcamp (c)2016 search

by PhilQ

HTML

<div class="bookcamp-search">
  <div class="bookcamp-search-group">
    <div class="bookcamp-search-label">Groep</div>
    <div class="bookcamp-search-dropdown">
      <input type="hidden" class="bookcamp-search-hidden" name="group" value="0">
      <a href="#" class="bookcamp-search-field" id="bookcamp-search-field-group"></a>
      <ul class="bookcamp-search-list">
        <li><a href="#" class="bookcamp-search-default" data-val="0" data-text="Alle groepen">Alle groepen</a></li>
        <li><a href="#" data-val="1" data-text="7 - 10 jaar">7 - 10 jaar</a></li>
        <li><a href="#" data-val="2" data-text="10 - 12 jaar">10 - 12 jaar</a></li>
        <li><a href="#" data-val="3" data-text="12 - 14 jaar">12 - 14 jaar</a></li>
        <li><a href="#" data-val="4" data-text="14 - 18 jaar">14 - 18 jaar</a></li>
      </ul>
    </div>
  </div>
  <div class="bookcamp-search-timespan">
    <div class="bookcamp-search-label">Wanneer</div>
    <div class="bookcamp-search-dropdown">
      <input type="hidden" class="bookcamp-search-hidden" name="timespan" value="3_2">
      <a href="#" class="bookcamp-search-field" id="bookcamp-search-field-timespan"></a>
      <ul class="bookcamp-search-list">
        <li><a href="#" class="bookcamp-search-default" data-val="0" data-text="Alle data">Alle data</a></li>
        <li><a href="#" data-val="1" data-text="Week 1 - Hele week">Week 1<span>21-07-2017 tot 28-07-2017</span></a></li>
        <li><a href="#" data-val="2" data-text="Week 2 - Hele week">Week 2<span>21-07-2017 tot 28-07-2017</span></a></li>
        <li><a href="#" data-val="3_1" data-text="Week 3 - Hele week">Week 3 - Hele week<span>21-07-2017 tot 28-07-2017</span></a></li>
        <li><a href="#" data-val="3_2" data-text="Week 3 - Minikamp (vanaf zondag)">Week 3 - Minikamp (vanaf zondag)<span>21-07-2017 tot 28-07-2017</span></a></li>
        <li><a href="#" data-val="3_3" data-text="Week 3 - Minikamp (vanaf woensdag)">Week 3 - Minikamp (vanaf woensdag)<span>21-07-2017...

SCSS

body {
  padding: 50px;
}

/* Fonts */
// @import url('https://fonts.googleapis.com/css?family=Lato:400,400i,900,900i|Montserrat:400,700');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,400,400i,700,700i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* Variables */
$blue: #2196F3;
$indigo: #3F51B5;
$lightindigo: #9FA8DA;
$pink: #E91E63;
$lightpink: #F48FB1;
$grey: #607D8B;
$lightgrey: #B0BEC5;

$md-depth-1: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px;
$md-depth-2: rgba(0, 0, 0, 0.156863) 0px 3px 10px, rgba(0, 0, 0, 0.227451) 0px 3px 10px;
$md-depth-3: rgba(0, 0, 0, 0.188235) 0px 10px 30px, rgba(0, 0, 0, 0.227451) 0px 6px 10px;
$md-depth-4: rgba(0, 0, 0, 0.247059) 0px 14px 45px, rgba(0, 0, 0, 0.219608) 0px 10px 18px;
$md-depth-5: rgba(0, 0, 0, 0.298039) 0px 19px 60px, rgba(0, 0, 0, 0.219608) 0px 15px 20px;

$primary-text: rgba(0,0,0, 0.87);
$secondary-text: rgba(0,0,0, 0.54);
$disabled-text: rgba(0,0,0, 0.38);

/* Reset */
/* [class^='bookcamp-'], [class*=' bookcamp-'] { */
[class='bookcamp-search'] {
  &, * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    display: inline-block;
    font-size: 0;
    font-family: 'Roboto', 'Noto Sans', sans-serif;
    color: #263238;
  }
}

/* Base */
.bookcamp-search {
  position: relative;
  width: 100%;
  padding: 15px;
  background-color: #fcfcfc;
  // box-shadow: 0 1px 6px 0 rgba(0,0,0,.12),0 1px 6px 0 rgba(0,0,0,.12);
  box-shadow: $md-depth-1;
  
  > div {
    vertical-align: top;
  }
}

/* Reusables */
.bookcamp-search-label {
  width: 100%;
  height: 15px;
  font-size: 12px;
  color: $blue;
  text-transform: uppercase;
  padding-left: 10px;
  margin-bottom: 5px;
}

.bookcamp-search-dropdown {
  width: 100%;
  position: relative;
  height:...

JavaScript

$.fn.exists = function(){
    return this.length > 0 ? this : false;
}

var bookcamp_initiated = false;

$( document ).ready(function() {

  $('.bookcamp-search-list li > a').each(function(){
    this.tabIndex = 20000;
  });

	$('.bookcamp-search-list')
    .on('open', function(){
      var $ul = $( this );
      $('.bookcamp-search-list').trigger('close');
    	$ul.add( $ul.siblings('.bookcamp-search-field') ).addClass('open');
      $( this ).find('li > a').each(function(){
      	this.tabIndex = 0;
      });
      $( window ).bind('click.pre-autoclose-' + $ul.siblings('.bookcamp-search-field').attr('id'), function(e) {
        $( window ).unbind('click.pre-autoclose-' + $ul.siblings('.bookcamp-search-field').attr('id'));
        $( window ).bind('click.autoclose-' + $ul.siblings('.bookcamp-search-field').attr('id'), function(e) {
          $ul.trigger('close');
        });
      })
      .bind('keydown.nav', function(e){
      	var k = e.which;
        if ( 38 == k ) {
        	e.preventDefault();
          var $next = $ul.find('li').last();
        	var $cur = $ul.find('a:focus').parent();
          if ( $cur.length !== 0 ) {
          	$next = $cur.prev().exists() || $next;
          } else {
          	$next = $ul.find('li > a.selected').parent().exists() || $next;
          }
          $next.find('a').first().focus();
        } else if ( 40 == k ) {
        	e.preventDefault();
          var $next = $ul.find('li').first();
        	var $cur = $ul.find('a:focus').parent();
          if ( $cur.length !== 0 ) {
          	$next = $cur.next().exists() || $next;
          } else {
          	$next = $ul.find('li > a.selected').parent().exists() || $next;
          }
          $next.find('a').first().focus();
        } else if ( 27 == k ) {
        	e.preventDefault();
        	$ul.trigger('close')
         		.siblings('.bookcamp-search-field').focus();
        }
      });
    })
		.on('close', function(){
    	$( this ).add( $( this...