Magento - Uncaught TypeError: Object [object Object] has no method?

Question

I am trying to implement a simple autocomplete form for custom pricing in Magento frontend.

I am using

<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>

Along with jQuery v1.10.2 which is being loaded before the other JS libraries.

        <action method="addJs"><script>lib/jquery-1.10.2.min.js</script></action>
        <action method="addJs"><script>prototype/prototype.js</script></action>
        <action method="addItem"><type>js</type><name>lib/html5shiv.js</name><params/><if>lt IE 8</if></action>
        <action method="addJs"><script>lib/ccard.js</script></action>
        <action method="addJs"><script>prototype/validation.js</script></action>
        <action method="addJs"><script>scriptaculous/builder.js</script></action>
        <action method="addJs"><script>scriptaculous/effects.js</script></action>
        <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
        <action method="addJs"><script>scriptaculous/controls.js</script></action>
        <action method="addJs"><script>scriptaculous/slider.js</script></action>
        <action method="addJs"><script>varien/js.js</script></action>
        <action method="addJs"><script>varien/form.js</script></action>
        <action method="addJs"><script>varien/menu.js</script></action>
        <action method="addJs"><script>mage/translate.js</script></action>
        <action method="addJs"><script>mage/cookies.js</script></action>
      **<action method="addJs"><script>lib/validate.js</script></action>**

I've add my jquery code to the catalog/product/view.phtml file

<script type="text/javascript">
    jQuery.noConflict();
    jQuery( document ).ready(function() {
        var validOptions = [];
        validOptions.push("FREE");
        var x = 1;
        while (x<1000) {
            if (x<100) {
                validOptions.push(""+x+"p");
            } else {
                var y = x.toString();
                var z = y.split('');
                validOptions.push("£"+z[0]+"."+z[1]+""+z[2]+"");
            }
            x++;
        }
        previousValue = "";

        jQuery('#ac').autocomplete({
            autoFocus: true,
            source: validOptions
        }).keyup(function() {
            var isValid = false;
            for (i in validOptions) {
                if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) {
                    isValid = true;
                }
            }
            if (!isValid) {
                this.value = previousValue
            } else {
                previousValue = this.value;
            }
    });
    });

</script>

and for the input field I am using

<input id="ac" />

The problem is I am getting an error and for some reason the autocomplete won't work as required.

Uncaught TypeError: Object [object Object] has no method 'autocomplete' 

You can see a demo of the autocompletion here

Can anyone see what is wrong withmy setup?

Answer 1

Try to define your jquery module after jQuery definition but before prototype. Because after prototype definition $ is not more jquery object and module cannot be initialized.

....
<action method="addJs"><script>lib/jquery-1.10.2.min.js</script></action>
<action method="addJs"><script>lib/validate.js</script></action>
<action method="addJs"><script>prototype/prototype.js</script></action>
....

Update

run

jQuery.noConflict();

between jquery definition and validate module.