jquery - 如何使用相同的 (css) id 为多个表单自动完成工作？

Question

以下代码用于搜索公司列表并返回前 10 个结果。对于具有单个 id(css) 的单个输入表单，它工作得很好。

当我在 View 中有第二个具有相同 ID 的表单时，自动完成仅适用于我调用输入 id="company"的第一个实例。出于我的目的，我有多个表单，我需要相同的自动完成功能才能工作，而无需更改 ID(company1、company2 等)

我不想为输入表单的每个实例重写脚本部分。 无论如何，是否有使用相同 ID 的所有输入的自动完成工作？

应用/ View :

 <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 -->***

配置/路由:

match '/company', to: 'search#company_autocomplete'

Controller /搜索 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

Answer 1

ID 必须是唯一的。一般来说，如果您需要将相同的东西应用到两个不同的元素，您应该使用一个类。

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