0

私は 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コンソールは私に与えます：

キャッチされていない TypeError: 未定義のプロパティ '長さ' を読み取ることができません

しかし、それは上記のjsソースではなく、私のjquery.2.1（縮小）ライブラリにあります。ブラウザは、入力の下にポップアップを表示しません#tbSearch。

@Mike が示唆したように、jsfiddle http://jsfiddle.net/gw0sfptd/1/ですが、ローカル json で動作するようにいくつか変更する必要がありました。これも機能しませんLOL

Davidが提案したように編集して、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 (null でない場合) です。これは、SQL がこれら 3 つのオプションすべてを検索するためです。クライアント側で製品のjavascript「クラス」を作成し、jsonを解析する必要がありますか? ブラッドハウンド全体がどのように機能するかはまだ不明です。(はい、サンプルを見て、先行入力とブラッドハウンドの両方のドキュメントを読みました) それが可能かどうかはわかりませんが、私の究極の願いは、先行入力の提案からアイテムを選択したときに、この productdatasource が productdetail にリンクされることです。 .aspx であり、categorydatasource (この質問では見えない) の項目を選択すると、ページが categorydetail.aspx にリダイレクトされます

私のクロムコンソールエラー

4

2 に答える 2

0

ベルギは正しかった。それ以来、大文字化は修正しましたが、複数形は修正しませdata.Productんでしdata.Productsた。または、引用した JSON が単に だったのかもしれません。data.Productsこの場合、配列はdata.Products.Productです。

アナグマとアレイ

もう1つ、知っておくべきことがあります。ここの JSON はBadgerfishからのもののようです。これが何を意味するか知っているかどうかはわかりませんが、基本的には XML を JSON に変換する方法です。製品が 1 つしかない場合や、製品がまったくない場合は、形式が異なります。たとえば、次の XML:

<Products>
    <Product ProductCode="C1010" ="Clips"/>
    <Product ProductCode="C1012" ="Clips"/>
</Products>

次の JSON が得られます。

{
    "Products": {
        "Product": [
            {"@ProductCode":"C1010","@CategoryName":"Clips"},       
            {"@ProductCode":"C1012","@CategoryName":"Clips"},
        ]
    }
}

しかし、積が 1 つだけの場合、baggerfish はそれを配列にすることを認識できず、次のようになります。

{
    "Products": {
        "Product": {"@ProductCode":"C1010","@CategoryName":"Clips"}
    }
}

製品がなければ、次のものを含めるかどうかはまったくわかりません"Product"。

{
    "Products": {}
}

結論としては、おそらくこれらのケースに備える必要があります。displayKey同様に、正確に 1 つの製品を受信しない限り、関数が例外をスローするように見えます。

nodejsサーバーがバックエンドサーバーに接続するプロジェクトに取り組んでいます。これらのバックエンドは従来 XML を使用していましたが、オプションで Badgerfish を使用して JSON で応答するようになりました。data.Products.Product配列に関するこの状況は非常に一般的であるため、引数として取り、それがまだ配列でない場合はそれを配列に変換するユーティリティ関数があります。

于 2014-11-01T12:36:18.640 に答える