Jquery自动完成功能无效

Question

我试图在我的项目中使用jquery的自动完成功能.但我不知道为什么它甚至没有打电话.

我把我的jsp文件放在下面..

<input id="productName" name="productName" type="text" placeholder=""/>

在我的js文件中...我写了..

$("#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" );
        }
    });

正如我在fire-bug中所示..我可以在下面看到js loaded..with这个页面......

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..

控制台中没有任何错误...加载页面时..

我不知道是什么问题..我真的陷入了这个..作为一个框架我使用broadleaf作为spring-mvc ..

提前致谢

Answer 1

您需要加载jQuery第一,然后jQuery UI再Bootstrap JS,正确的顺序应该是:

jquery-v2.0.3.js
jquery-ui.js
bootstrap.min.js

代替:

bootstrap.min.js
jquery-ui.js
jquery-v2.0.3.js 

编辑:

对于未来的游客来说,原因其实是因为之间的矛盾,jquery-ui.js并jquery.autocomplete.js因为jquery-ui.js已经包含自动完成功能.

因此,您只需要删除jquery.autocomplete.js即可使其正常工作.