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.

Hawker

I found my answer. I was loading the jQuery library twice. #19591655 – Beasley

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.

Unpack

I've confirmed with Firebug that the file is being downloaded and the order is correct. JQuery, JQuery UI, then I use autocomplete. – Hawker

A chance you might relook at the problem? – Hawker

Answer 2

It could be:

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

Budweis

I had the same message when creating a new .Net core application, I added the Jquery/JQueryUI references at the top of the _Layout.cshtml file, but it turns out the JQuery library was by default being added at the bottom of the page after the page body was rendered. I commented this out and it worked fine – Vazquez

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

Dowery

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.

Throttle

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.

Trinatte