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?
