开发者

dynamically added input fields and autocomplete

I've searched the net and am unable to find a solution. Similar questions have either gone answered or I was unable to implement the answers. I'm hoping someone here can help me!

So, I am trying to combine an autosuggest script with an add additional input field script. I have a professor field with an option to add more professor fields if needed. I can get the autosuggest to work with the first professor field, but the autosuggest doesn't run on dynamically added input fields.

The autosuggest script I am using is the AUSU jQuery-Ajax Auto Suggest

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

And the addinput script is from this tutorial: http://new2wp.com/snippet/jquery-add...t-form-fields/

Here is the javascript i have between the tags:

<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>

and here is a snippet of my code from the form I am creating:

<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>

I've heard some people mention livequery as the solution, but I have trouble implementing it. Thank you for any help you can provide!!


You must bind the autosuggest function to the newly added input fields. In otherwords, each time you dynamically add a new input field, the autosuggest function must be set to work with said element.

Here is a tiny example:

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


jQuery Live Query Plugin will do this work.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜