Unobtrusive Jquery autocomplete rails 3

I have a railsCombobox() plugin that I have implemented...it actually connects to an input HTML tag like the following:

$('input[id=box1]').railsCombobox();

My question:

I have many inputs with ids ranging from box1 to box5 that I want to append this plugin to, what would be the easiest and most efficient way to do so. Should I use a loop? or is there a special piece of code that can take care of that easily?

Many thanks.

Edit: This is my javascript plugin:

$(document).ready(function(){
    jQuery('input[data-ddcombobox]').railsCombobox();
});

(function( jQuery ){
    var self = null;
    $.fn.railsCombobox =  function(){
        if(!this.railsAutoCompleter){
            this.railsAutoCompleter = new jQuery.railsCombobox(this);
        }
    //  this.init(this)
    }/*function() {
        return this.live('focus', function(){
            if(!this.railsAutoCompleter){
                this.railsAutoCompleter = new jQuery.railsCombobox(this);
            }
        });
    };*/
    jQuery.railsCombobox = function(e){
        _e = e;
        this.init(_e);
    };
    jQuery.railsCombobox.fn = jQuery.railsCombobox.prototype = {
        railsCombobox: '0.0.1'
    };  
    jQuery.railsCombobox.fn.extend = jQuery.railsCombobox.extend = jQuery.extend;
    jQuery.railsCombobox.fn.extend({
        init: function(e){
            e.delimiter = $(e).attr('data-delimiter') || null;
            function split( val ){
                return val.split( e.delimiter );
            }
            function extractLast( term ) {
                return split( term ).pop().replace(/^\s+/,"");
            }
            $(e).autocomplete({
                source: function( request, response){
                    $.getJSON( $(e).attr('data-ddcombobox'), {
                        term: extractLast(request.term)
                        }, response );
                    },
                search: function(){
                    // cusom minLength
                    var term = this.value;
                },
                focus: function(){
                    // prevent value inserted on focus
                    return false;
                },
                select: function( event, ui ){
                    var terms = split(this.value);
                    // remove the current input
                    terms.pop();
                    // add the selected item
                    terms.push(ui.item.value);
                    // add placeholder to get the comma and space at the end
                    if(e.delimiter != null){
                        term.push("");
                        this.value = terms.join(e.delimiter);
                    }else{
                        this.value = terms.join("");
                        if($(this).attr('id_element')){
                            $($(this).attr('id_element')).val(ui.item.id);
                        }
                    };
                    return false;
                }
            });
            ////////////
            this.button = $( "<button type='button'>&nbsp;</button>" )
                .attr( "tabIndex", -1 )
                .attr( "title", "Show All Items" )
                .insertAfter(e)
                .button({
                    icons: {
                        primary: "ui-icon-triangle-1-s"
                    },
                    text: false
                })
                .click(function() {
                    // close if already visibl
                    if($(e).autocomplete("widget").is(":visible")){
                        $(e).autocomplete("close");
                    }else{ 
                        if($(e).val()==""){
                            $(e).autocomplete('search', " ");
                        }else{
                            $(e).autocomplete('search', $(e).val());
     开发者_开发问答                   }
                    }
                });
            ////////////
        }
    });
})( jQuery );

You should use the # selector for ids. The best approach though is to assign your inputs the same class like autocomplete

<input id="box1" class="autocomplete" type="text" />

You can then just do

$('.autocomplete').railsCombobox();

UPDATE

Your problem with the plugin is caused by your click handler

.click(function() {
    // close if already visibl
    if($(e).autocomplete("widget").is(":visible")){
        $(e).autocomplete("close");
    }else{ 
        if($(e).val()==""){
            $(e).autocomplete('search', " ");
        }else{
            $(e).autocomplete('search', $(e).val());
        }
    }
});

You're working with e which is all of the objects you passed in. In this case all of the input fields. I would open up another question regarding how to fix your plugin.

1. add a class to all input and use class selector

eg

html

<input type="text" name="box1"  class="myPlugin" />
<input type="text" name="box2"  class="myPlugin" />
<input type="text" name="box3"  class="myPlugin" />

js

jQuery('.myPlugin').railsCombobox();