autocomplete “is not a function”

Question

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 1

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.

Answer 2

It could be:

1. The order that jquery.js get loaded.
2. Duplicate jquery.js includes in the same page.

Answer 3

Maybe try using the jQuery.noConflict() method for a test. It basically just makes you use a different alias for jQuery. This worked for me in SF4.3.

var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

Answer 4

I had this issue and what was happening was my jQuery file was loading twice. Pretty much this was in my head:

<script src="assets/js/jquery.min.js"></script>
<script src="js_css/jquery-ui.min.js" ></script>

And then I had an AJAX call that loads more parts of my document and there was another:

<script src="assets/js/jquery.min.js"></script>

script tag in my AJAX results and I was $.hmtl() my results to my document. By doing this we are pretty much redefining all of the var thatjquery-ui.min.js altered or took advantage of.

Answer 5

This is caused by a conflict with Sitefinity's own use of jQuery.

If you move your script references for jQuery to the bottom of the page before the closing form tag. This will resolve the issue in Sitefinity 4.0, but I suspect it will also fix this problem in Sitefinity 3.7.