JSFiddle - React, Tailwind, and code Playground

by virginiam

HTML

<div class="placeholder logo"></div>

  <div class="form">
    <div id="filter" class="filter" tabindex=2>
      <div id="filterLabel" class="filterLabel">All</div>
      <ul id="filterList" class="filterList"></ul>
    </div>
    <input id="query" type="text" tabindex=3 placeholder="Type your search query" />

    <div id="autocomplete">
      <ul id="autocompleteList" class="autocompleteList">
        <li>Harry Potter and the Order of Something</li>
        <li>Bananas</li>
        <li>Thelonious Monk</li>
        <li>I got pizza</li>
      </ul>
    </div>
  </div>

  <div class="placeholder login"></div>

CSS

body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica", sans-serif;
  text-align: center;
}

.form {
  display: inline-block;
  text-align: left;
  font-size: 15px;
  position: absolute;
  border: 1px solid #eee;
  background: #fff;
  left: 50px;
  right: 50px;
  top: 5px;
}

.form.focused {
  left: 5px;
  right: 5px;
  z-index: 999;
}

.form input {
  border: none;
  outline: none;
  font-size: 15px;
  font-family: "Helvetica", sans-serif;
}

.filter {
  font-family: "Helvetica", sans-serif;
  box-sizing: border-box;
  padding: 12px;
  display: inline-block;
  background: #eee;
  cursor: pointer;
}
.filter:focus {
  background: #aaa;
  outline: none;
}
.filterList,
.autocompleteList {
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 130%;
  display: none;
  position: absolute;
  top: 46px;
  left: 0;
  width: 100%;
  padding: 12px;
  background: #eee;
}

.autocompleteList {
  background: #fff;
  border: 1px solid #eee;
}

.filterList li {
  list-style: none;
}

.filterList .selected {
  font-weight: bold;
}

.placeholder {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 25px;
  background: #444;
  z-index: 1;
}

.logo {
  top: 5px;
  left: 5px;
}

.login {
  top: 5px;
  right: 5px;
}

JavaScript

/* jshint indent:2 */
/* jshint unused:false */
/* global FastClick, unveil, google, setupTypeahead */

'use strict';

(function(){

  var init = function () {
    setupFilter();
    setupAutocomplete();
    focusForm();
  };

  var setupFilter = function() {

    // This would come from elsewhere
    var filterOptions = [
      'All',
      'Ebooks',
      'Audiobooks',
      'Movies',
      'Libraries',
      'Crime',
      'Romance'
    ];

    var filter = $('#filter');
    var filterLabel = $('#filterLabel');
    var filterList = $('#filterList');
    var filterOpts = '';
    var filterListIsOpen = false;

    $.each(filterOptions, function() {
      filterOpts += '<li>' + this + '</li>';
    });

    filterList.html(filterOpts);
    filterList.find(':first').addClass('selected');
    filterOpts = filterList.find('li');


    var activateFilter = function() {
      filterList.css({'display': 'block'});
      filterListIsOpen = true;
    };

    var deactivateFilter = function() {
      filterListIsOpen = false;
      filterList.css({'display': 'none'});
    };

    var selectOption = function(opt) {
      filterOpts.removeClass('selected');
      opt.addClass('selected');
      filterLabel.text(opt.text());
    };

    filterOpts.each(function() {
      $(this).on('click', function() {
        selectOption($(this));
        deactivateFilter();
      });
    });

    $(filter).on('keydown', function(e){

      var selectedItem = $('.selected');
      var next;
      var prev;

      if(e.which === 40) {
        next = selectedItem.next();
        if (next.length > 0) {
          selectOption(next);
        }
      } else if (e.which === 38) {
        prev = selectedItem.prev();
        if (prev.length > 0) {
          selectOption(prev);
        }
      }

      if(e.which === 13 || e.which === 27) {
        deactivateFilter();
        // filter.blur();
      }
    });

    filter.on('focus', function() { activateFilter(); });
    filter.on('blur', function()...