javascript - 解析 JSON 以进行预输入时出现问题

Question

我刚开始使用 typeahead 插件，而且我的 javascript(不是 jquery)技能很糟糕。这是我的 JSON:

{"Product":[
    {"@ProductCode":"C1010","@CategoryName":"Clips"},       
    {"@ProductCode":"C1012","@CategoryName":"Clips"},
    {"@ProductCode":"C1013","@CategoryName":"Clips"},
    {"@ProductCode":"C1014","@CategoryName":"Clips"},
    {"@ProductCode":"C1015","@CategoryName":"Clips", "EAN":"0987654321"}
]}

我有 typeahead 包 0.10.5 这是我的 js:

$(document).ready(function () {
    var products = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        limit: 100,
        remote: {
            url: 'TypeAhead.ashx?q=%QUERY&cat=prod',
            filter: function (data) {
                return data.Products;
            }
        }
    });

    products.initialize();

    $("#tbSSearch").typeahead({
        highlight: true,
        minLength: 2
    }, {
        source: products.ttAdapter(),
        displayKey: function (products) {
            return products.product.code;
        },
        templates: {
            header:"<h3>Products</h3>"
        }
    });
});

Chrome 控制台给我:

Uncaught TypeError: Cannot read property 'length' of undefined

但那是在我的 jquery.2.1(缩小)库中，而不是上面的 js 源。浏览器在 #tbSearch 输入下方不显示弹出窗口。

正如@Mike建议的，jsfiddle http://jsfiddle.net/gw0sfptd/1/但我必须修改一些东西才能使用本地 json。这也不起作用哈哈

编辑正如大卫建议的那样，我应该清理我的json。现在就是这样:

[{"Code":"C1010","Gtin13":0,"CategoryName":"Clips"},
 {"Code":"C1012","Gtin13":0,"CategoryName":"Clips"},
 {"Code":"C1013","Gtin13":0,"CategoryName":"Clips"}]

和js:

remote: {
    url: 'TypeAhead.ashx?q=%QUERY&cat=prod',
    filter: function (products) {
        return $.map(products.results, function (product) {
            return {
                value: product.Code
            };
        });
    }
}
datumTokenizer: function (datum) {
    return Bloodhound.tokenizers.whitespace(datum.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,

但是 Firefox 控制台中没有工作预输入并且没有(可用)错误。我想要的输出是产品代码列表，还有它们所在的类别和 gtin13(如果不为空)，因为 sql 会搜索所有这三个选项。我应该在客户端为产品创建一个 javascript“类”并解析它的 json 吗？我仍然不清楚整个寻血猎犬的事情是如何运作的。 (是的，我已经查看了示例并阅读了 typeahead 和 Bloodhound 的文档)我不知道这是否可能，但我的最终愿望是，当您从 typeahead 建议中选择一个项目时，此产品数据源链接到产品详细信息.aspx，如果您选择类别数据源的一个项目(在此问题中不可见)，它将页面重定向到categorydetail.aspx

Answer 1

我写了一个 fiddle 来演示如何将 JSON(本地，而不是远程示例)与 typeahead.js 一起使用:

http://jsfiddle.net/Fresh/f9rbeqyc/

在下面的答案中，我选择使用 ProductCode 作为建议，但如果您愿意，您显然可以使用 CategoryName。

我使用的代码的关键部分以及一些注释在这里:

var json = '{"Product":[ ' +
 '{"@ProductCode\":\"C1010\",\"@CategoryName\":\"Clips\"},' +
 '{"@ProductCode\":\"C1012\",\"@CategoryName\":\"Clips\"},' +
 '{"@ProductCode\":\"C1015\",\"@CategoryName\":\"Clips\", \"EAN\":\"0987654321\"}]}';

// Parse the JSON string to a JSON object
var jsonObject = JSON.parse(json);

var products = new Bloodhound({
    // Use $.map() to create an array of ProductCode key value pairs
    local: $.map(jsonObject.Product, function (product) {
        return {
            value: product["@ProductCode"]
        };
    }),
    datumTokenizer: function (datum) {
        // Specify the variable within the datum to use as suggestion data
        // In this case it's the value
        return Bloodhound.tokenizers.whitespace(datum.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace
});

另请注意，datumTokenizer 指定使用哪个值作为建议；创建了一个带有名为“value”键的数据数组，因此我们希望使用“value”作为显示键。在您的示例中，您有“return products.product.code;”这是行不通的，因为你的数据没有一个名为“code”的字段，你的 JSON(!) 也没有。

您应该可以引用我的示例和 this答案以获取使用远程工作的预输入。