gistfile1.js

$.fn.appForm = function() {
  return this.each(function() {
    var $search = $('<input type="search">'),
        $button = $('<button>Search</button>'),
        $result_container = $('<div id="app_search_result" />'),
        $app_list = $('#apps');
        
    var $app_form = $(this).after($search, $button, $result_container).detach();
    
    $search.data('search_context', 'local');
        
    $search.bind({
      'search.apps': function() {
        $.ajax({
          url: '/apps/search',
          data: {
            'query': $search.val(),
            'context': $search.data('search_context')
          },
          dataType: 'html',
          beforeSend: function(request) {
            $search.trigger('searching.apps');
          },
          error: function(response, status) {
            if (response.status == 404) {
              if ($search.data('search_context') == 'local') { // first 404? => search the market place api
                $search.data('search_context', 'remote');
                $search.trigger('search.apps');
              } else { // second 404? => display submit new app link
                $search.trigger('search_complete.apps');
                $search.trigger('did_not_find.apps');
              }
            }
          },
          success: function(response) {
            $search.trigger('search_complete.apps');
            $search.trigger('found.apps', response)
          }
        });
      },
      'searching.apps': function() {
        $search.add($button).attr('disabled','disabled');
        if ($search.data('search_context') == 'local') {
          $result_container.html('Loading...');
        } else {
          $result_container.html('Extreme loading...');
        }
      },
      'search_complete.apps': function() {
        $search.add($button).attr('disabled',false);
      },
      'found.apps': function(event, response) {
        $result_container.html(response);
      },
      'did_not_find.apps': function() {
        $result_container.html('<p>No matches =(</p>');
      }
    })
    .bind(($.browser.opera ? "keypress" : "keydown") + ".apps", function(event) {
      if (event.keyCode == 13) {
        event.preventDefault();
        $search.blur();
        $button.trigger('click.apps');
      }
    });
    
    $button.bind('click.apps', function(event) {
      event.preventDefault();
      if ($search.val().length > 0) {
        $search.trigger('search.apps');
      }
    });

    // Adds an app to the app list
    $result_container.delegate('li', 'click.apps', function(event) {
      var $org = $(this),
          id = $org.attr('id').replace(/([A-z]|\_|\-)*/i, '');

      // Do we already have this in the apps list?
      if ((app = document.getElementById('app_'+id))) {
        $(app).trigger('click.apps');
        return;
      }

      var current_index = $app_list.children('li').length,
          $app = $org.clone(true)
                   .attr('id', 'app_'+id)
                   .append('<input type="hidden" name="mash_app[mashed_apps_attributes]['+current_index+'][app_id]" value="'+id+'">')
                   .find('span.add').removeClass('add').addClass('remove').text('-').end();
      $app_list.append($app);
      $org.addClass('choosen');
    });
    
    // Remove an app from the apps list
    $app_list.delegate('li', 'click.apps', function(event) {
      var $app = $(this);
      $('#searched_'+$app.attr('id')).removeClass('choosen');
      $app.remove();
    });
    
  });
};