Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

autocomplete "is not a function"

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.

like image 223
Jacques Avatar asked Mar 02 '11 14:03

Jacques


People also ask

How do I fix autocomplete is not a function?

To solve the "$(...). autocomplete is not a function" jQuery error, make sure to load the jQuery library before loading the jQuery UI library. The libraries have to be loaded only once on the page, otherwise, the error is thrown. Copied!

What is autocomplete example?

A user types into an input, and the autocomplete “completes” their thought by providing full terms or results: this is the very base of an autocomplete experience. For example, try typing the letter “m” in the search box below. You can select suggestions like “macbook” and “mobile”.

What is jQuery autocomplete?

Advertisements. Auto completion is a mechanism frequently used in modern websites to provide the user with a list of suggestions for the beginning of the word, which he/she has typed in a text box. The user can then select an item from the list, which will be displayed in the input field.

How does autocomplete set value?

The selected value of the AutoComplete can only be a string value. To set the value, use the [value] property binding of the component or the ngModel binding.


1 Answers

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.

like image 79
Phil Avatar answered Sep 19 '22 01:09

Phil