動態添加輸入字段和自動完成

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會做這項工作。