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

Disarm

make sure you define your autocomplete in a $(document).ready(function() { ...... }); that may be why its failing without errors. – Grammalogue

ya.. i have define autocomplete function in $(document).ready(function(){...........}) ... still it has problem.. – Disarm

Could you tell me where did you include those jquery files? It isn't working for me. – Corenda

@Corenda : I have included that files into footer of my page(after body tag) – Disarm

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.

Caliban

In fire-bug..i can see my js file loaded in footer.. as below.. <script src="/js/jquery-v2.0.3.js"> <script src="/js/jquery-ui.js"> <script src="/js/bootstrap.min.js"> <script src="/js/jquery.validate.js"> <script src="/js/jquery.autocomplete.js"> <script src="/js/product.js"> Still it is not working..? :( – Disarm

Thanks for the answer.. Actually I have loaded both jquery.ui.js and jquery.autocomplete.js AND both provided autocomplete function.. That's why it conflicts. As i remove jquery.autocomplete.js .. now it's working fine... – Disarm

@Disarm Glad you figured out the solution. I've edited my answer using your solution so that it might be helpful for future visitors :-) – Caliban

The Edit part of your answer helped me! – Harker