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

make sure you define your autocomplete in a $(document).ready(function() { ...... }); that may be why its failing without errors. — JF it, Mar 07 '14 at 18:42
ya.. i have define autocomplete function in $(document).ready(function(){...........}) ... still it has problem.. — Ankit, Mar 08 '14 at 13:44
Could you tell me where did you include those jquery files? It isn't working for me. — JavaTechnical, Mar 17 '14 at 05:52
@JavaTechnical : I have included that files into footer of my page(after body tag) — Ankit, Mar 19 '14 at 10:58

Felix · Accepted Answer · 2014-03-11T09:25:01.333

8

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.

edited Mar 11 '14 at 09:25

answered Mar 07 '14 at 18:34

Felix

37,892
8
43
55

In fire-bug..i can see my js file loaded in footer.. as below.. – Ankit Mar 08 '14 at 13:15
1

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... – Ankit Mar 11 '14 at 09:19
@Ankit Glad you figured out the solution. I've edited my answer using your solution so that it might be helpful for future visitors :-) – Felix Mar 11 '14 at 09:25
The Edit part of your answer helped me! – Utsav Dawn May 31 '15 at 10:19

Jquery autocomplete is not working

1 Answers1