gistfile1.js

    // there are problems with fadeIn and fadeOut becoming confused and
    // thinking the end is partway through the fade.
    jq.fn.stippleDisappear = function (speed) {
      var self = jq(this);
      
      if (typeof speed === 'undefined') {
        speed = 'fast';
      }
      self.stop().fadeTo(speed, 0, function () {
        self.hide();
      });

      return self;
    };

    // see above for aforementioned issues with fadeIn and fadeOut
    jq.fn.stippleAppear = function (speed) {
      var self = jq(this);

      if (typeof speed === 'undefined') {
        speed = 'fast';
      }
      self.stop().show().fadeTo(speed, 1);
      return self;
    };



    // stippleNewAutoCompleteSuggestions is intended to be called on an
    // input's autocomplete-box
    jq.fn.stippleNewAutoCompleteSuggestions = function (suggestions, boldLength) {
      var self = jq(this),
          items = self.children('.stipple-autocomplete-items');
      items.empty();

      jq.each(suggestions, function () {
        items.append(JST.autocomplete_item({text: this, boldLength: boldLength}));
      });

      self
        .removeData('selectedIndex')
        .find('.stipple-selected')
          .removeClass('stipple-selected');
      
      return self;
    };

    jq.fn.stippleArrowPressed = function (defaultIndex, callback) {
      var self = jq(this),
          acBox = self.data('acBox'),
          selectedIndex,
          liElements;

      if (!acBox) {
        return self;
      }

      selectedIndex = acBox.data('selectedIndex');

      liElements = acBox.find('li');

      if (typeof selectedIndex === 'undefined') {
        selectedIndex = defaultIndex;
      } else {
        liElements.eq(selectedIndex).css({
          'color': 'white',
          'background-color': 'red'
        }).removeClass('stipple-selected');

        selectedIndex = callback(selectedIndex, liElements.length - 1);
      }

      acBox.data('selectedIndex', selectedIndex);

      liElements.eq(selectedIndex).css({
        'color': 'red',
        'background-color': 'white'
      }).addClass('stipple-selected');

      return self;

    };

    // handle the up arrow being pressed in the input connected to an autocomplete
    jq.fn.stippleUpArrowPressed = function () {
      var self = jq(this),
          acBox = self.data('acBox'),
          liElements;

      if (!acBox) {
        return self;
      }

      liElements = acBox.find('li.stipple-autocomplete-item');

      return self.stippleArrowPressed(liElements.length - 1, function (idx, idxDefault) {
        idx -= 1;

        if (idx < 0) {
          idx = idxDefault;
        }

        return idx;
      });
    };

    // handle the down arrow being pressed in the input connected to an autocomplete
    jq.fn.stippleDownArrowPressed = function () {
      var self = jq(this),
          acBox = self.data('acBox'),
          liElements;

      if (!acBox) {
        return self;
      }

      liElements = acBox.find('li.stipple-autocomplete-item');

      return self.stippleArrowPressed(0, function (idx, maxIdx) {
        idx += 1;

        if (idx > maxIdx) {
          idx = 0;
        }

        return idx;
      });
    };


    (function () {
      var autoCompleteHandler = function (self, event, urlFragment, requestData) {
        var acBox = self.data('acBox'),
            selected;

        if (!acBox) {
          // assumes the ac box has been placed as a sibling of the input, after it.
          acBox = self.nextAll('.stipple-autocomplete-box:first');
          self.data('acBox', acBox);
          acBox.data('input', self);
        }

        if (self.val().length < 2) {
          if (acBox.is(':visible')) {
            acBox.stippleDisappear();
          }
          return;
        }

        selected = acBox.find('li.stipple-selected');

        switch (event.keyCode) {
        case 38: // up arrow
          self.stippleUpArrowPressed();
          return false;
        case 40: // down
          self.stippleDownArrowPressed();
          return false;
        case 9: // tab
        case 13: // enter
          if (selected.length) {
            self.val(jq.trim(selected.text()));
          }
          acBox.stippleDisappear();

          // we want tab to work normally
          return event.keyCode === 9;
        }

        jq.get(protocol + hostname + '/' + urlFragment + '/' + encodeURIComponent(self.val()), requestData, function (data) {
          if (data.length) {
            acBox
              .stippleNewAutoCompleteSuggestions(data, self.val().length)
              .stippleAppear();
          } else {
            if (acBox.is(':visible')) {
              acBox.stippleDisappear();
            }
          }
        }, 'jsonp');

        return true;
      };

      jq('input.stipple-brand').live('keyup keydown', function (event) {
        // tab (keyCode 9) only works on keydown events. weird.
        if ((event.type === 'keyup' && event.keyCode !== 9) ||
            (event.type === 'keydown' && event.keyCode === 9)) {
          return autoCompleteHandler(jq(this), event, 'brand_ac', {});
        }
      });

      jq('input.stipple-model').live('keyup keydown', function (event) {
        var self, brandInput, brand;

        if ((event.type === 'keyup' && event.keyCode !== 9) ||
            (event.type === 'keydown' && event.keyCode === 9)) {
          self = jq(this);
          brandInput = self.prevAll('.stipple-brand');
          brand = brandInput.val();

          if (brand === brandInput.attr('data-stipple-empty-val')) {
            brand = '';
          }
          return autoCompleteHandler(jq(this), event, 'product_ac', {brand: brand});
        }
      });
    }());