A google-esque typeahead/autocomplete thingy...maybe I'll turn this into a full-blown extension widget thing eventually!

index.html

<input>

script.js

options = [
  'create ticket',
  'group ',
  'community ',
  'search products for ',
  'search knowledgebase containing ',
  'inventory ',
  'vendor ',
  'network map',
  'start scan',
  'stop scan',
  'private messages',
  'tickets',
  'alerts',
  'dashboard',
  'home',
  'tabrez',
  'yolo'
];

// Make this yo input field yo
inputField = $('input');
lastComplete = null;

// TODO: use a better design pattern lolwtfbbq
function init(opts) {
  inputField = opts.inputField;
  if($('.typeahead-widget').length === 0) {
		var div = $('<div class="typeahead-widget">');
 	 	$('<span class="white">').appendTo(div);
 	 	$('<span class="grey">').appendTo(div);
    div.css('left', inputField.offset().left + 'px');
    div.css('top', inputField.offset().top + 'px');
    div.css('width', inputField.css('width'));
    div.css('height', inputField.css('height'));
    div.css('font-family', inputField.css('font-family'));
    div.css('font-size', inputField.css('font-size'));
    div.insertBefore(inputField);
  }
}

function autocomplete(value, array) {
  array = array.sort();
  for (var i=0; i < array.length; i++) {
    var word = array[i];
    if (word.toLowerCase().indexOf(value.toLowerCase()) === 0) {
      return word;
    }
  }
  return null;
}

function clearTypeAhead(id) {
  $('.' + id + ' .white').empty();
  $('.' + id + ' .grey').empty();
}

$(function() {
  init({
    inputField: $('input')
  });
  
  $('.typeahead-widget').click(function() {
    inputField.focus();
  });
  
  inputField.blur(function(event) {
    //$(event.target).val('');
    //clearTypeAhead('typeahead-widget');
  });
  
  inputField.keydown(function(event) {
    if(event.keyCode === 39 || event.keyCode === 9) {
      event.preventDefault();
      if(lastComplete) {
	 	    clearTypeAhead();
	 	    inputField.val(lastComplete);
      }
    }
  });

  
  inputField.bind('keydown keyup', function(event) {
    var pos = inputField.val().length;
    if(pos === 0 || inputField.val() === '') {
      clearTypeAhead('typeahead-widget');
    } else {
      var val = inputField.val();
  		var complete = autocomplete(val.toLowerCase(), options);
      lastComplete = complete;
      if(complete === null) {
        clearTypeAhead('typeahead-widget');
      } else {
	      var begin = complete.substr(0,pos);
        var end = complete.substr(pos);
        $('.typeahead-widget .white').text(begin);
      	$('.typeahead-widget .grey').text(end);
      }
    }
  });
});

style.css

.white {
  opacity: 0;
}

.grey {
  color: #CCC;
  overflow: hidden;
}

.typeahead-widget {
  position: absolute;
  padding-left: 2px;
  padding-top: 2px;
  z-index: 1000;
  overflow: hidden;
  white-space: nowrap;
}

input {
  display: block;
  color: #000;
  border: solid #000 1px;
  margin: 0;
  font-family: sans-serif;
  font-size: 12pt;
}