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 - ＆gt;

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

Answer 2

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

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

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

 })

编辑：在success需要删除IE之后看到一个尾随逗号

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

2 个答案: