Jquery 是否对多个表单字段应用相同的自动完成操作？

我正在设计一个表单，其中我需要输入两个人，这两个字段都由jqueryui的autocomplete支持。自动完成操作是相同的

以下是我面临的问题：

当实际输入表单时，这两个字段都将发送正确的AJAX请求以获取自动完成候选项。但只有第一个表单才能正确输出结果列表

我当前使用的选择器是：

$(".person_input").autocomplete()

更改选择器也无济于事：

$("#person1,#person2").autocomplete()

我想知道是否有任何方法可以更改选择器或某些自动完成行为，这样我就可以将自动完成正确应用于这两个字段，而无需在代码中编写两次相同的函数

提前谢谢大家,

表单字段的定义如下：

<input type="text" value="" name="person1" class="person_input" id="person1">
<input type="text" value="" name="person2" class="person_input" id="person2">

以及完整的代码：

$(".person_input").autocomplete({
    source: function(request, response) {
    $.ajax({
      url: "/ajax/get_person/",
      data: {'q':request.term},
      dataType: "json",
      type: "POST",
      success: function(data){
        response(data);
      },
    });
    },
  focus: function( event, ui ) {
      $(this).val(ui.item.name);
      return false;
    },
    select: function( event, ui ) {
      $(this).val(ui.item.name);
      return false;
    }
  }).data( "autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li></li>" )
      .data( "item.autocomplete", item )
      .append( "<a>" + item.name + "</a>" )
      .appendTo( ul );
  };

$（“.person\u input”）。自动完成({
来源：功能（请求、响应）{
$.ajax({
url:“/ajax/get\u person/”，
数据：{'q'：request.term}，
数据类型：“json”，
类型：“POST”，
成功：功能（数据）{
答复（数据）；
},
});
},
焦点：功能（事件、用户界面）{
$（this.val（ui.item.name）；
返回false；
},
选择：功能（事件、用户界面）{
$（this.val（ui.item.name）；
返回false；
}
}).数据（“自动完成”）。\u renderItem=功能（ul，项目）{
返回$（“
”）
.data（“item.autocomplete”，item）
.append（“+item.name+”）
.附录（ul）；
};

试试看它是否隔离了两个实例：

$(".person_input").each(function(){

   $(this).autocomplete(/* options*/);

 })

编辑：在IE的

成功

需要删除后看到一个尾随逗号

迭代dom->

$(".person_input").each(function(){ //grab each element with the class = person_input

对于找到的每个元素，运行autocomplete（）

在此函数范围内修改autocomplete，使其应用于所有表单

$(".person_input").each(function(){
  $(this).autocomplete({
    source: function(request, response) {
      $.ajax({
        url: "/ajax/get_person/",
        data: {'q':request.term},
        dataType: "json",
        type: "POST",
        success: function(data){
          response(data);
        }//unnecessary trailing comma removed here
      });
    },
    focus: function( event, ui ) {
     $(this).val(ui.item.name);
      return false;
    },
    select: function( event, ui ) {
      $(this).val(ui.item.name);
      return false;
    }
  }).data( "autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li></li>" )
    .data( "item.autocomplete", item )
    .append( "<a>" + item.name + "</a>" )
    .appendTo( ul );
  };
});

$（“.person\u input”）。每个（函数（）{
$（此）。自动完成({
来源：功能（请求、响应）{
$.ajax({
url:“/ajax/get\u person/”，
数据：{'q'：request.term}，
数据类型：“json”，
类型：“POST”，
成功：功能（数据）{
答复（数据）；
}//此处删除了不必要的尾随逗号
});
},
焦点：功能（事件、用户界面）{
$（this.val（ui.item.name）；
返回false；
},
选择：功能（事件、用户界面）{
$（this.val（ui.item.name）；
返回false；
}
}).数据（“自动完成”）。\u renderItem=功能（ul，项目）{
返回$（“
”）
.data（“item.autocomplete”，item）
.append（“+item.name+”）
.附录（ul）；
};
});

谢谢。但是由于细节的原因，我不得不接受另一个人。（如果我能给出两个接受，我会！）在}后面加一个分号也很好）谢谢你的全面回复！

$(".person_input").each(function(){
  $(this).autocomplete({
    source: function(request, response) {
      $.ajax({
        url: "/ajax/get_person/",
        data: {'q':request.term},
        dataType: "json",
        type: "POST",
        success: function(data){
          response(data);
        }//unnecessary trailing comma removed here
      });
    },
    focus: function( event, ui ) {
     $(this).val(ui.item.name);
      return false;
    },
    select: function( event, ui ) {
      $(this).val(ui.item.name);
      return false;
    }
  }).data( "autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li></li>" )
    .data( "item.autocomplete", item )
    .append( "<a>" + item.name + "</a>" )
    .appendTo( ul );
  };
});