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即可使其正常运行。

Jquery自动完成功能无效

1 个答案: