Ненавязчивые рельсы автозаполнения Jquery 3

Question

У меня есть плагин railsCombobox (), который я реализовал ... на самом деле он подключается к входному HTML-тегу, как показано ниже:

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

Мой вопрос:

У меня есть много входов с идентификаторами от box1 до box5, к которым я хочу добавить этот плагин, что будет самым простым и эффективным способом сделать это. Должен ли я использовать цикл? или есть специальный фрагмент кода, который может легко об этом позаботиться?

Большое спасибо.

Edit: Это мой плагин 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

Вы должны использовать # селектор для идентификаторов.Однако лучше всего назначить входные данные одному и тому же классу, например autocomplete

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

. Затем можно просто выполнить

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

ОБНОВЛЕНИЕ

Ваша проблема с плагином вызвана вашим обработчиком кликов

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