I am trying to use autocomplete functionality of jquery into my project. But i have no idea why it is not even calling.
I have put my jsp file as below..
<input id="productName" name="productName" type="text" placeholder=""/>
And in my js file.. i have written..
$("#productName").autocomplete({
/*source: '${pageContext. request. contextPath}/search'*/
source: function( request, response ) {
alert('asdfasdfasdfasdfadsf');
$.ajax({
url: "/../search",
data: "q="+request.term,
dataType: "json",
success: function( data ) {
response( $.map( data.values, function( item ) {
return {
label: item.label,
value: item.value
}
}));
}
});
},
minLength: 2,
select: function( event, ui ) {
},
open: function() {
//$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
//$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
As i show in fire-bug.. i can see below js loaded..with this page...
bootstrap.min.js
jquery-ui.js
jquery-v2.0.3.js
jquery.autocomplete.js
jquery.big-slide.js
jquery.big-slide.js
jquery.big-slider.min.js
jquery.validate.js
product.js - this contains above js code..
There is no any error in console...while loading page..
I don't know what's the problem.. i am really stuck into this.. As a framework i am using broadleaf as a spring-mvc..
Thanks in advance
You need to load jQuery
first then jQuery UI
then Bootstrap JS
, the correct order should be:
jquery-v2.0.3.js
jquery-ui.js
bootstrap.min.js
instead of:
bootstrap.min.js
jquery-ui.js
jquery-v2.0.3.js
Edit:
For future visitors, the reason is actually because of the conflict between jquery-ui.js
and jquery.autocomplete.js
since jquery-ui.js
is already include the autocomplete feature.
So you just need to remove jquery.autocomplete.js
to make it works.