动态添加输入字段和自动完成

Question

我搜索了网络，无法找到解决方案。类似的问题要么已经回答，要么我无法实现答案。我希望有人能帮助我！

所以，我试图结合一个自动建立脚本和添加额外的输入字段脚本。如果需要，我有一个教授领域，可以选择添加更多教授领域。我可以让autosuggest与第一个教授领域一起工作，但autosuggest不会在动态添加的输入字段上运行。

我使用的自动提示脚本是AUSU jQuery的Ajax的自动建议

http://plugins.jquery.com/project/au...t-autocomplete

而且addinput脚本是从本教程：http://new2wp.com/snippet/jquery-add...t-form-fields/

这里是JavaScript我有标签之间：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">  
</script> 
<script type="text/javascript" src="assets/js/jquery.ausu-autosuggest.min.js"></script> 
<script type="text/javascript"> 

$(document).ready(function() { 
$.fn.autosugguest({ 
className: 'ausu-suggest', 
methodType: 'POST', 
minChars: 2, 
rtnIDs: true, 
dataFile: 'data.php' 
}); 
}); 
</script> 

<script type="text/javascript"> 
$(function() { 
var profDiv = $('#addprofblock'); 
var i = $('#addprofblock p').size() + 1; 

$('#addprof').live('click', function() { 

$('<p><div class="ausu-suggest"><input type="text" id="professor" size="25" name="professor[]" value="" autocomplete="off" /></div><a href="#" id="remprof" style="text-decoration:none; font-weight:bold;">Remove</a></p>').appendTo(profDiv); 
i++; 
return false; 
}); 

$('#remprof').live('click', function() { 
if(i > 2) { 
$(this).parents('p').remove(); 
i--; 
} 
return false; 
}); 
}); 
</script> 

以下是我创建的表单中的一段代码：

<div id="addprofblock"> 
<p><div class="ausu-suggest"><input type="text" name="professor[]" id="professor" size="25" value="" autocomplete="off" /></div> 
<a href="#" id="addprof" style="font-weight: bold; text-decoration: none">Add</a> 
</p> 
</div> 

我听说有人提到livequery作为解决方案，但是我很难实现它。感谢您提供任何帮助！！

Answer 1

您必须将autosuggest函数绑定到新添加的输入字段。换句话说，每次您动态添加新的输入字段时，必须将autosuggest函数设置为与所述元素一起使用。

这是一个很小的例子：

function addInput() { 
    var $input = $('<input type="text"/>'); 
    $('div').append($input); 
    $input.autoSuggest({params...}); 
} 

Answer 2

jQuery Live Query Plugin会做这项工作。