将相同的自动填充操作应用于多个表单字段？

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