jQuery 自动完成不会显示来自 PHP 的 JSON 响应

Question

我被 jQuery 自动完成的实现所困扰。我正在使用本教程： http://1300grams.com/2009/08/17/jquery-autocomplete-with-json-jsonp-support-and-overriding-the-default-search-parameter-q/

我的 jQuery 代码是这样的：

$("#quickSearchQuery").autocomplete("http://mydomain.net/json.php", {
    dataType: 'json',
    selectFirst: true,
    minChars: 2,
    max: 8,
    parse: function(data) {
        var rows = new Array();
        data = data.members;
        for(var i = 0; i < data.length; i++) {
            rows[i] = { id : data[i].id, name : data[i].name, location : data[i].location };
        }
        return rows;
    },
    formatItem: function(row, i, n) {
        return row.name + ' (' + row.location + ')';
    }
});

调用 http://mydomain.net/json.php?q=Alb 生成如下 JSON 响应：

{"query":"Alb","members":[{"id":"1","name":"Peter Albert","location":"New York"},{"id":"4","name":"Adalbert Smith","location":"Alabama"},{"id":"42","name":"Albert Einstein","location":"Vienna"}]}

我的问题是：它不起作用。自动完成不会出现，也不会创建任何元素。 如果我运行教程中的代码，一切都很好，并且我会得到自动完成的城市列表。但即使我只更改源 URI 并从 data.geonames 更改为 data.members （依此类推），自动完成程序也会停止工作。

我尝试过的方法：

• 我将 dataType 更改为 jsonp 和 json，但 jsonp 创建了“无效标签” JSON 文件上的错误
• 我用 header("Content-Type: application/json"); 修改了 PHP 脚本的内容类型
• 我尝试了所有其他自动完成程序，但没有任何改变
• 我尝试了所有修复从 Stack Overflow 的回复和教程中发现 。
• 我将来自 geonames.org 的 JSON 响应复制到一个文件中，将其上传到我的服务器，并使用此硬编码响应作为查找源 仍然没有显示自动完成器:(

也许你有主意？

谢谢！ 乔

Answer 1

使用自动完成功能，您必须使用属性 id 和值才能使其正常工作。仅使用这些属性来呈现列表。

在你的 php 对象中，声明类似这样的内容（这个来自 C#，但认为你理解它）：

public class Product
    {
        public String id { get; set; } //must be used
        public String value { get; set; } //must be used
        public String marque { get; set; }
    }

并将 json 序列化字符串返回给客户端。

json 是这样的，

[{"id":"1","value":"UMTS","comment":"umts comment"},
{"id":"2","value":"RAN","comment":"ran comment"},
{"id":"3","value":"Swap","comment":"swap comment"}]

它会在你的 JS 中自动映射，并且自动完成功能现在应该可以工作。