jquery ui 自动完成 - 服务器结果未出现

发布于 2024-11-03 08:13:53 字数 1429 浏览 0 评论 0原文

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

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>

原文

jQuery UI autocomplete is fetching valid json results from the server, but does not insert them into DOM / display in browser. When I embed the results in the page, autocomplete works as expected.

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

JSON result from /ajax/abc (detected using Firebug):

["alpha","beta","gamma"]

Generated source from Firefox after typing "gam" into the input

(Server):

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

(Embedded results):

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

扎心 2024-11-10 08:13:53

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

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

回复收藏 0 原文

怪我鬧 2024-11-10 08:13:53

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

Access-Control-Allow-Origin: *

请参阅此示例：http://jqueryui.com/演示/自动完成/remote-jsonp.html
结果返回一个标头，其中包含该标头。这是跨服务器调用所需要的。

回复收藏 0 原文

若言繁花未落 2024-11-10 08:13:53

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

回复收藏 0 原文

日久见人心 2024-11-10 08:13:53

在最坏的情况下，您可以将函数设置为源。在此函数中，您可以给出一个数组作为响应。
您还可以在此函数中加载 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);
}

In worst case you can set a function as source. in this function you can give an array in response.
Also you can load your JSON in this function.

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);
}

回复收藏 0 原文

~没有更多了~