将相同的自动完成操作应用于多个表单域？

我正在设计一个表单，我需要输入两个人，这两个字段都支持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">

和autcomplete代码，例如：

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

来源

2012-03-07 rickypai

迭代DOM的后 - >

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

对于找到的每个元件，运行自动完成（）范围内的

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

来源

2012-03-07 06:54:20 Ohgodwhy

之后添加分号，谢谢你的全面回应！ – rickypai 2012-03-07 07:07:00

试试这个，看看它隔离了2个实例：

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

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

})

编辑：看到一个尾随逗号success需要去除用于IE

来源

2012-03-07 06:50:09 charlietfl

谢谢。但由于细节的原因，我将不得不将其他人接受。（如果我能够给出两个接受，我会的！）也可以在}） – rickypai 2012-03-07 07:06:36

将相同的自动完成操作应用于多个表单域？

回答

相关问题