jquery - 将相同的自动完成操作应用于多个表单字段？

Question

我正在设计一个表单，需要输入两个人，这两个字段都由 jquery-ui 的自动完成功能支持。自动完成操作是相同的。

这是我面临的问题:

当实际输入表单时，两个字段都会发出正确的 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 );
  };

Answer 1

迭代 dom ->

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

对于找到的每个元素，运行 autocomplete()

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