不显眼的jQuery的自动完成轨道3

Question

我有我实现了一个railsCombobox（）插件...它实际上连接到输入HTML标记类似如下：

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

我的问题：

我有许多输入的范围从box1到box5，我想将这个插件附加到，这将是最简单和最有效的方式。我应该使用循环吗？还是有一段特殊的代码可以轻松处理？

非常感谢。

编辑： 这是我的javascript插件：

$(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); 

Answer 1

您应该使用# selector的IDS。最好的办法，虽然是分配您的输入相同的类象autocomplete

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

然后，您可以做

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

UPDATE

你用插件问题是由您的点击造成的处理者

.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()); 
     } 
    } 
}); 

您正在使用e，这是您传入的所有对象。在这种情况下，所有输入字段。我会打开关于如何解决你的插件的另一个问题。

Answer 2

1. 类添加到所有输入和使用类选择

如

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();