jQuery UI自动完成下拉不显示

Posted 2023-04-15

【中文标题】jQuery UI自动完成下拉不显示

【英文标题】：jQuery UI autocomplete drop down not displaying

【发布时间】：2012-06-09 01:01:13

【问题描述】：

我正在尝试使用 jQuery UI 自动完成功能来搜索 spotify 的音乐库。虽然一切顺利，但我确实得到了成功的回应：

没有下拉建议。例如，我正在搜索“时间”，我想查看：

Time

，作者 Hans Zimmer 回到

时间

，Pitbull 大

时间

拉什

等等。这是我的 javascript 代码：

<script>$(function() $( "#spotify_song_search" ).autocomplete(source: function(request, response) 
        $.get("http://ws.spotify.com/search/1/track.json",  q: request.term ,function( data )  alert(data); response(data););
    ,success: function(data) 
            // pass your data to the response callback 
            alert(data); response(data);
        ););</script> 

我一定是做错了什么。我还在这里查看了 jQuery 文档：http://jqueryui.com/demos/autocomplete/，但它没有给出任何解释为什么会发生这种情况。我添加了警报，看看我是否至少会得到响应，我这样做了，但它只返回[object Object]。我需要做什么才能显示搜索结果？

错误： 第 417 行 Uncaught SyntaxError: Unexpected token ILLEGAL：

【问题讨论】：

控制台选项卡中没有错误？

哦，没关系，您的网络标签上的状态是OK。我会研究代码。

也许您可以向我们展示更多代码，主要是您调用 3 次的 response() 函数，以及能够重现它的标记。

Make sure it the code is actually valid first.

您需要格式化响应数据，我假设这是在response() 方法中完成的。 jQueryUI 需要来自success() 函数的特定格式，如果不匹配，则不会显示结果。我怀疑从 Spotify 格式到预期格式的转换不正确。查看documentation，尤其是Remote Datasource 和Remote JSONP datasource，并查看控制台中的“网络”选项卡以查看响应数据格式。跨度>

【参考方案1】：

自动完成小部件希望数据以非常特定的方式进行格式化，以便可以对其进行解析。您提供或传递给response 回调的数组必须是：

带有字符串的数组，或 包含具有 label 属性、value 属性或两者兼有的对象的数组。

（有关详细信息，请参阅“概述”/“预期数据格式”下的自动完成文档）

当您拥有无法更改的数据源时，执行此操作的典型方法是使用 $.map 将结果转换为自动完成期望的格式：

$("#spotify_song_search").autocomplete(
    source: function(request, response) 
        $.get("http://ws.spotify.com/search/1/track.json", 
            q: request.term
        , function(data) 
            response($.map(data.tracks, function (el) 
                return el.name;
            ));
        );
    
);

示例： http://jsfiddle.net/ANmUs/（注意：目前这在 Firefox 中似乎不起作用；这可能是由于响应的大小造成的。但它在 Chrome 中可以正常工作）

【讨论】：

我目前正在使用 chrome 的稳定版本，但它似乎仍然无法正常工作。我也没有看到任何请求。我使用了控制台，它给出了一个错误：Uncaught SyntaxError: Unexpected token ILLEGAL。我认为这与代码的$.map 部分有关。

@PeteA：你在找什么？我无法复制。

对不起，我的意思是我的网站。我将图片添加到我的帖子中，即使它在 jsfiddle 中工作正常，它也会给我一个错误。

@PeteA：我无法确认这一点，但我担心响应的大小可能会导致问题。

有一些奇怪的字符导致了问题。它没有出现在记事本++中，但随机出现在 html 中。这是“非法”角色。感谢您的帮助。