autocomplete "is not a function"

Jacques picture Jacques · Mar 2, 2011 · Viewed 55.8k times · Source

We've tested the Jquery UI (jquery-ui-1.8.10.custom.min.js) Autocomplete function in a simple HTML page which worked.

We then copy the same code into an Asp.net User Control and it stops working. The Javascript error reads "$searchBox.autocomplete is not a function".

This user control is being used in an Asp.net Sitefinity 3.7 project. On the page it has a ScriptManager. Not sure what else I can add...

Anyone know what's going on?

Ammend:

<script src="/js/jquery-1.5.min.js" type="text/javascript"></script>
<script src="/js/jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var termTemplate = "<span class='ui-autocomplete-term'>%s</span>";

        $('input#searchInput').autocomplete({
            source: ['johannesburg z', 'johannesburg x', 'johannesburg v', 'johannesburg b', 'johannesburg a', 'johannesburg q', 'johannesburg u', 'johannesburg y', 'johannesburg o', 'johannesburg p'],
            minLength: 3,
            open: function (e, ui) {

                var 
                acData = $(this).data('autocomplete'),
                styledTerm = termTemplate.replace('%s', acData.term);

                acData
                .menu
                .element
                .find('a')
                .each(function () {
                    var me = $(this);
                    me.html(me.text().replace(acData.term, styledTerm));
                });

            }
        });
    });
</script>
<div class="outerSearchBox">
    <div class="searchFieldWrapper">
        <input id="searchInput" type="text" class="searchField" /><a class="searchButton">SEARCH
        </a>
        <div class="searchSugContainer">

Thanks.

Answer

Phil picture Phil · Mar 2, 2011

That error usually means that jquery or the plugin hasn't yet been loaded. Check that you're function call isn't getting hit before the document is loaded:

$(function(){
    var $searchBox = $('#mysearchBox');
    $searchBox.autocomplete(...);
});

Also check that the path to the javascript files are correct. Firebug or google chrome developer tools are useful for checking both of these issues.