Tag Archives: Javascript

Unobtrusive Autocomplete Rails Plugin

Auto complete solution, with customizable results (return just the word or word+id…) and no framework dependency, just use a plain text_field + class=> autocomplete and every autocomplete libary you like (included: jQuery).

autocomplete

# Controller
class UserController < ApplicationController
  autocomplete_for :user, :name
end

#Customized....
autocomplete_for :user, :name do |items,method|
  render :text => items.map{|item| "#{item.send(method)} -- #{item.id}"}.join("\n")
end

# View
<%= f.text_field :auto_user_name, :class => 'autocomplete', 'autocomplete_url'=>autocomplete_for_user_name_users_path %>

# Routes
map.resources :users, :collection => { :autocomplete_for_user_name => :get}

#JS
#any library you like
#(includes examples for jquery jquery.js + jquery.autocomplete.js + jquery.autocomplete.css )
jQuery(function($){//on document ready
  //autocomplete
  $('input.autocomplete').each(function(){
    var input = $(this);
    input.autocomplete(input.attr('autocomplete_url'));
  });
});

#Model(input/output association)
class User
  find_by_autocomplete('name')
end
class Post
  autocomplete_for('user','name') # auto_user_name= + auto_user_name
end
.

Not as thought free as the default version, but gives you a lot more control.

script/plugin install git://github.com/grosser/simple_auto_complete.git
README

jqUnit the jQuery Test Framework

My last project used jsUnit, but after some searching around, i found a great alternative: jqUnit!

It is a simple wrapper around the jQuery testrunner, so it is possible to run it with any library. And it is jsUnit compatible, so you can reuse all old tests.

Other features:

  • simple, just write test(‘it should find ids’,function(){ok(true)})
  • very light syntax ok(value,msg), equal(actual,expected,msg)…
  • DOM reset after every test
  • clean output, that can be opened/closed by clicking test-names
  • real user interaction ca be simulated with triggerEvent

Download Source and Demo
Demo Testsuite

Javascript Array.include and Array.index

Just needed them and poor JS lacks these basic functions…

Warning:
if(![‘hello’].index(‘hello’))alert(‘watch out because 0 is false‘);

Array.prototype.index = function(val) {
  for(var i = 0, l = this.length; i < l; i++) {
    if(this[i] == val) return i;
  }
  return null;
}

Array.prototype.include = function(val) {
  return this.index(val) !== null;
}

Event delegation with almost any Selector

Always reapply the events to the DOM objects when they are inserted or loaded? NO MORE!

There are 3 solutions out there at the moment, jQuery listen, jQuery intercept both by event delegation addict Ariel Flesler and LiveQuery a plugin that reapplys all rules to every new DOM element loaded.

(Event delegation = every div.onclick will reach the parents of the div and can be captured there without binding directly to the div)

Listen and intercept both have a very limited selector choise, ‘a.b’ or ‘a#hello’. LiveQuery can be used rather thoughtfree but comes at a load-time-price for every existing/new element.

I like delegation more, but the selector choise is too limited. So here comes my
‘intercept any selector’ hack!

$.intercept(‘table td div.hello a#click :input’,’click’,fn) will bind your Event to the document, and run on every click of ‘table td…’. The lower you bind, the higher the performance cost(needless event checking)
$(‘table’).intercept(‘td div.hello a#click :input’,’click’,fn) will be faster…

As long as the DOM element you bound your events to is not replaced, all events will continue to work. This approach works best for few(and slow) rules that match many elements. There is no initial performance cost, so your page will load fast.

Only when a event is triggered the checking is done, and can be costly if you used a lot of events or a often triggered event (mouseover…).

The code you need to make it happen is here(insert into intercept.js):

  ...
    for( selector in handlers ){
      if( selector == 'self' && e.target == this || $.intercept.matches($target,selector))
        ret = handlers[selector].apply(this, arguments) !== false && ret;
    }
    return ret;
  };

  /**
   * Walk the element backwards and see if the selector matches (before reaching the document)
   * @see https://pragmatig.wordpress.com/2008/03/08/event-delegation-with-almost-any-selector/
   */
  $.intercept.matches = function(obj,selector){
    var root_reached = false;
    var words = selector.split(' ').reverse();
    for(i in words){
    	do{
    	  //match found?
    	  if(obj.is(words[i])){
    		  obj=$(obj.parent());
    		  break;
  	    }
    	  obj=$(obj.parent());
    	  root_reached = obj.get(0) == document;
      }while(!root_reached);
  	  if(root_reached)return false;
    }
    return !root_reached;
  };