Jquery 如何使用相同的（css）id使多个表单自动完成？

下面的代码用于搜索公司列表并返回前10个结果。它可以很好地用于具有单个id（css）的单个输入表单

当我在视图中有具有相同id的第二个表单时，自动完成仅在我调用输入id=“company”的第一个实例中起作用。出于我的目的，我有多个表单，我需要使用相同的自动完成功能，而无需更改id（company1、company2等）

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

应用程序/视图：

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

控制器/搜索控制器

  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

---

这很有意思，但是你不需要写

$（“#公司”）

，你可以写

$（“*[id=company]”

id必须是唯一的。通常，如果需要将同一事物应用于两个不同的项，则应使用类

<input type="text" class="span11 company" id="company1" name = "company" >

<input type="text" class="span11 company" id="company2" name = "company" >

然后你的JS选择器就可以使用句点而不是#

$（'.company'）。自动完成({
最小长度：2，
来源：“”，
焦点：功能（事件、用户界面）{
$（'.company'）.val（ui.item.name）；
返回false；
},
选择：功能（事件、用户界面）{
$（'.company'）.val（ui.item.name）；
返回false；
}
})

Sigh，这是因为ID是唯一的，同一个文档中不能有两个相同的ID，除了编写有效代码之外，没有其他修复方法。

<input type="text" class="span11 company" id="company1" name = "company" >

<input type="text" class="span11 company" id="company2" name = "company" >

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