不顯眼的jQuery的自動完成軌道3

我有我實現了一個railsCombobox（）插件...它實際上連接到輸入HTML標記類似如下：不顯眼的jQuery的自動完成軌道3

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

來源

2011-03-04 mabounassif

您應該使用# 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，這是您傳入的所有對象。在這種情況下，所有輸入字段。我會打開關於如何解決你的插件的另一個問題。

來源

2011-03-04 17:35:41 Vadim

如果我這樣做了，所有的插件都有相同的id，但有些奇怪的原因。所以基本上我的combobox（）包含一個按鈕，如果我點擊它，頁面上的所有組合框都會響應點擊。 – mabounassif 2011-03-04 17:38:50

@Mahmoud，你爲每個輸入分配一個不同的ID嗎？我不確定你的插件是如何工作的，你是創建這個按鈕還是硬編碼到插件中。如果是後者，那麼是的，他們都會迴應。 – Vadim 2011-03-04 20:22:00

它確實在我的插件中進行了硬編碼，這怎麼解決？ – mabounassif 2011-03-05 00:06:30

類添加到所有輸入和使用類選擇

如

HTML

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

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

來源

2011-03-04 17:43:07

不顯眼的jQuery的自動完成軌道3

回答

相關問題