myjs.js

var indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };

$(function() {
  var fitMenuToTokenfield, names, user_id;
  if ($('#journal_entry_friend_tokens').length) {
    user_id = String($('#journal_entry_friend_tokens').data('user'));
    console.log("kicking things off with " + user_id);
    names = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      prefetch: {
        url: "/users/" + user_id + "/friends.json"
      }
    });
    names.initialize();
    $('#journal_entry_friend_tokens').on('tokenfield:createtoken', function(event) {
      var current_value, existingTokens, name_array;
      console.log("token created: starting with " + user_id + " and " + event.attrs.value + " and " + event.attrs.label);
      name_array = name_array = $.map(names.index.datums, function(e) {
        return e.name;
      });
      current_value = event.attrs.value;
      existingTokens = $(this).tokenfield('getTokens');
      $.each(existingTokens, function(index, token) {
        if (token.value === current_value) {
          event.preventDefault();
        }
      });
      if (indexOf.call(name_array, current_value) < 0) {
        console.log("token: " + event.attrs.value + " must be created for user " + user_id);
        $.ajax({
          type: "POST",
          url: '/users/' + user_id + '/friends',
          data: {
            friend: {
              name: current_value
            }
          },
          success: function(data) {
            console.log('creation successful');
            $('#journal_entry_friend_tokens').closest('.form-group').addClass('has-error');
            return $('#journal_entry_friend_tokens').closest('.form-group').append('<p>added friend:' + current_value + '</p>');
          },
          error: function(data) {
            return false;
          }
        });
      }
    }).tokenfield({
      typeahead: [
        null, {
          source: names.ttAdapter(),
          display: 'name',
          name: 'friends-names',
          displayKey: 'label'
        }
      ]

      /**
       * Make the dropdown menu as wide as it needs to be
       * (to the end of the tokenfield)
       * @param {jQuery} $ttField Twitter-typeahead element
       */
    });
    fitMenuToTokenfield = function($ttField) {
      var $tokenfield, tokenfieldPadLeft, tokenfieldPadRight, ttFieldPadLeft, ttFieldPadRight, ttFieldWidth;
      ttFieldWidth = parseInt($ttField.css('width'), 10);
      ttFieldPadRight = parseInt($ttField.css('padding-right'), 10);
      ttFieldPadLeft = parseInt($ttField.css('padding-left'), 10);
      $tokenfield = $ttField.closest('.tokenfield');
      tokenfieldPadLeft = parseInt($tokenfield.css('padding-left'), 10);
      tokenfieldPadRight = parseInt($tokenfield.css('padding-right'), 10);
      $ttField.find('.tt-menu').css('width', ttFieldWidth + ttFieldPadRight + ttFieldPadLeft + tokenfieldPadLeft + tokenfieldPadRight + 2);
    };
    $('.twitter-typeahead').on('typeahead:render', function() {
      return fitMenuToTokenfield($('.twitter-typeahead'));
    });
    return $(window).resize(function() {
      return fitMenuToTokenfield($('.twitter-typeahead'));
    });
  }
});