Question

jQuery UI自动完成从服务器获取有效的json结果，但不会将它们插入到浏览器中的DOM / display中。当我将结果嵌入页面时，自动完成功能按预期工作。

使用Javascript：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"></script>

    $('#query').autocomplete({
        source: '/ajax/abc',
        /*source: ['alpha', 'beta', 'gamma'],*/
        minLength: 2,
        select: function(e,ui) {
            $('#query').val( ui.item.value );
            $('form#search').submit(); 
        }
    });

来自/ ajax / abc的JSON结果（使用Firebug检测到）：

[ “阿尔法”， “测试”， “伽马”]

在输入

中输入“gam”后，从Firefox生成源代码

（服务器）：

<ul style="z-index: 1; top: 0px; left: 0px; display: none;" aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all"></ul>

（嵌入式结果）：

<ul style="z-index: 1; top: 31px; left: 185px; display: block; width: 149px;" aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all"><li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all">gamma</a></li></ul>

Answer 1

与我几周前下载的jquery验证插件存在冲突。我不确定冲突究竟是什么，但我通过一次评论每个脚本来识别它。

我从CDN下载了最新的缩小版jquery验证，解决了这个问题。

Answer 2

您的远程服务器是否返回正确的标头以允许此操作？

Access-Control-Allow-Origin：*

请参阅此示例：http://jqueryui.com/demos/autocomplete/remote-jsonp.html 结果返回一个标题。这是跨服务器调用所必需的。

Answer 3

也许mime-type是错误的，因此jQuery不会将json作为json处理。检查输出json的mime类型。它必须是'application / json'

Answer 4

在最坏的情况下，您可以将功能设置为源。在这个函数中，你可以给出一个数组作为响应。您也可以在此函数中加载JSON。

source: function(request, response) {
   /*
    * response is the typed text like 'gam'
    * request is the function that you have to call with the results
    */
   /* here your code */
   response(results);
}

jquery ui autocomplete - 服务器结果未显示

4 个答案: