CODEWITHSUNDEEP
javascriptjqueryajaxbindingautocomplete
doub1ejack
doub1ejack

Reputation: 11171

jquery autocomplete on element retrieved w/ ajax

I am using a simple jquery autocomplete script to search for colleges in a text field. This same script works on another page. On the page in question though, I retrieve the form with an ajax call and it's not working. Did I forget something or is there an issue binding the autocomplete event to the when it is inserted in the DOM?

AJAX Markup:

<input type="text" class="alumni" name="alumni0" id="alumni0" value="Academy College">

Script:

    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" type="text/css" media="all" rel="stylesheet" />
    <script type="text/javascript" language="javascript">
        var availableTags;
        $(function() {
            availableTags = ["A T Still University of Health Sciences", ... ,"Abilene Christian University"];
            $(".alumni").autocomplete({
                source: availableTags
            });
        });
    </script>

Upvotes: 1

Views: 1221

Answers (1)

scrappedcola
scrappedcola

Reputation: 10572

Try rebinding the autocomplete event when you add the new form to the dom. More than likely what is happening is since autocomplete isn't attached with the jquery live function your new elements just don't have the event attached.

Upvotes: 1

Related Questions