Jquery autocomplete is not working

Question

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

Answer 1

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.