Следующий код предназначен для поиска в списке компаний и возврата 10 результатов. Он отлично работает для одной входной формы с одним id (css).
Когда у меня есть вторая форма в представлении с одним и тем же идентификатором, автозаполнение работает только для первого экземпляра, где я вызываю вход id = "компания". Для моей цели у меня есть несколько форм, для которых мне нужен один и тот же автозаполнение, чтобы работать без изменения идентификатора (company1, company2 и т.д.),
Я не хочу переписывать секцию сценария для каждого экземпляра входной формы. Есть ли в любом случае автоматическая полная работа для всех входов с использованием одного и того же идентификатора?
приложение/вид:
<script>
$('#company').autocomplete({
minLength: 2,
source: '<%= company_path %>',
focus: function(event, ui) {
$('#company').val(ui.item.name);
return false;
},
select: function(event, ui) {
$('#company').val(ui.item.name);
return false;
}
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.name + "</a>" )
.appendTo( ul );
};
});
</script>
<input type="text" class="span11" id="company" name = "company" > ***<!--autocomplete works fine-->***
<input type="text" class="span11" id="company" name = "company" > ***<!--autocomplete does not work in second instance -->***
Config/маршруты:
match '/company', to: 'search#company_autocomplete'
Контроллер /search_controller
def company_autocomplete
if params[:term]
if params[:term].length>1
@companies_autocomplete = Company.select(:name).where( 'name LIKE ?', "%#{params[:term]}%").first(10)
end
end
render :json => @companies_autocomplete.to_json
end
Это взломанно, но вместо того, чтобы писать $("#company")
, вы можете написать $("*[id=company]")
.
Идентификаторы должны быть уникальными. Обычно, если вам нужно применить одно и то же к двум различным элементам, вы должны использовать класс.
<input type="text" class="span11 company" id="company1" name = "company" >
<input type="text" class="span11 company" id="company2" name = "company" >
Тогда ваши селекторы JS могут просто использовать периоды вместо #
$('.company').autocomplete({
minLength: 2,
source: '<%= company_path %>',
focus: function(event, ui) {
$('.company').val(ui.item.name);
return false;
},
select: function(event, ui) {
$('.company').val(ui.item.name);
return false;
}
})