examples/index.html from nelsonic/ac

examples/index.html
Summary

Maintainability

Test Coverage

Issues
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>AutoComplete Like Boss!</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/united/bootstrap.min.css">
    </head>
    <body>
      <!-- <h1> Lookup a word: </h1> -->
      <input type="text" id="word" placeholder="Type a word..."/>
      <span id="suggest"></span>
<style>
body {
  margin: 1em 0em 0em 20%;
}
h1 {
  font-size: 3em;
  margin-bottom: .5em;
}
#word {
  font-size: 3em;
  height: 2em;
  padding: 0.2em;
}
a {
  margin-bottom: 0px
}
#word, #suggest a {
  width: 60%;
  /* min-width: 300px; */
}

#suggest a {
  display: block;
  font-size: 1.5em;
  padding: 0.3em;
  border-bottom: 1px solid #bdc3c7;
  border-left: 1px solid #bdc3c7;
  border-right: 1px solid #bdc3c7;
  color: #2c3e50;
  text-decoration: none;
}
.even {
  background-color: #ecf0f1;
  color: #27ae60;
}
#suggest a#active, #suggest a:hover {
  background-color: #27ae60;
  color: white;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>

$(function() {
  $('#word').focus();

  var words = [], word, previousWord,
  index = -1; // index tracks where in the suggestions array we are
  console.log('Type Something in teh box!');
  // each time a key is pressed on the keyboard run this:
  $('#word').keyup(function(e){

    var k = e.keyCode;
    // scrolling through word suggestions
    console.log(k);

    if(k === 8) { // backspace (delete a character)
      index = -1; // reset word index
    }

    if(k === 40 || k === 32) {
      // enter, space or down (key codes 13, 32 and 40 respectively)
      console.log("down");
      index++;
    }

    if(k === 38) {
      // left or up (key codes 37 or 38)
      console.log("up");
      index--;
    }

    if(k === 13){
      // select the word from suggestions list
      $('#word').val(words[index]);
      console.log('VOTE!', words[index]);
    }

    word = $('#word').val().trim();
    console.log(word);

    if(word.length < 2){
      $( "#suggest" ).html('');
      index = -1;
    } else {
      $.get( "/"+word, function( data ) {
        console.log(data)
        if( data && data.length > 0) {
          renderSuggestions(data, index);
        } else { // no words
          $( "#suggest" ).html('');
        }
      });
    } // end

  }); // end $('#word').keyup

  // "Vote" for a word
  $('.sug').click(function(e){
    console.log(e);
  });
});

function renderSuggestions(data, index){
  words = data.split(',');
  var count = 0, row;
  var html = words.map(function(word){
    row = oddEven(count);
    active = activeWord(count, index);
    count++;
    return "<a class='sug "+row +"' id='"+active  +"' >"+word+"</a>";
  });

  $( "#suggest" ).html( html.join('') );
}

// function voteUpWord(word){
//
// }


function activeWord(count, index) {
  if(count === index){
    return 'active';
  } else {
    return '';
  }
}

function oddEven(count) {
  if(count%2===0){
    return 'even';
  } else {
    return 'odd';
  }
}

// display a sad smiley?
function noresults() {

}

</script>

    </body>
</html>