問題タブ [bloodhound]

アップデート

@BenSmith ( https://stackoverflow.com/users/203371/BenSmith )からの正解に基づいて、問題を見つけることができ、JSON 階層を適切にナビゲートしていないことがわかりました。作業コードは次のとおりです。

助けてくれてありがとう@BenSmith！

元の質問

Typeahead と Bloodhound を使用するのは初めてです。ドキュメントはあまり役に立ちません。使用している API から返される一連の JSON オブジェクトがあります。Bloodhound が理解できるように、JSON オブジェクトをナビゲートする方法を見つけようとしています。

ここでの目標は、ユーザーが曲名を入力し始めることです。オートコンプリートは、曲名とそれが演奏されたアーティストのリストを表示します。

例:マストドンによる真夜中のチャイム

各ライブラリの最新バージョンを使用しています: https://twitter.github.io/typeahead.js/

サンプル JSON (SampleData.json):

このサイトhttp://json.parser.online.fr/を使用して、JSON を簡単にフォーマットします。

返される JSON は常に同じ形式ですが、異なるデータが含まれています。この例では、「トラック」は null です。他の結果にはデータがあります。また、そのデータにもアクセスできる必要があります。

JQuery の最新バージョンを使用しています。これが私のhtmlページに含まれているものです：

HTMLは次のとおりです。

スクリプトは次のとおりです。

このコードを実行しようとすると、次のエラーが発生します。

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

ここでの助けや指示は大歓迎です。Typeahead/Bloodhound で作業している JSON データを取得する方法を知る必要があるだけです。

ありがとう！

Twitter の Typeahead の例のページには、Typeahead で複数のデータセットを使用する方法が示されています。localデータ ソース オプションを使用した実際のコード例を次に示します。

JSFIDDLE

ページに入力して上記の JSFIDDLE を試すと、2 つのデータセットが先行入力ドロップダウンに表示されることがわかります。

私が直面している問題は、データ ソースを に変更するとremote、2 番目のデータセットのみがドロップダウンに表示されることです。コードを簡略化しましたremote(実際には、get ではなく POST を使用してクエリを送信します)。ここで確認できます。

JSFIDDLE

このJSFIDDLEを試すと、先行入力ドロップダウンに 2 番目のデータセットのみが表示されることがわかります。入力を入力するときにネットワーク トラフィックを表示すると、AJAX 要求が 2 つ (データセットごとに 1 つ) あるはずなのに、1 つしか作成されていないことがわかります。

Web サイトでネットワーク トラフィックを (実際のコードを使用して) 表示すると、2 番目のデータセットに対してのみ要求が行われていることがわかります。したがって、何らかの理由で、Typeahead/Bloodhound は、各データセットに対して 1 つではなく、2 番目のデータセットに対してのみ要求を行っています。また、各データセットではなく、2 番目のデータセットの結果 (またはその欠如) のみを表示します。

remoteデータ ソース オプションを使用すると、複数のデータセットが機能しないのはなぜですか?

私はこのタイプアヘッドを ajax 呼び出しで動作させようとしていますが、近くにいますが立ち往生しています。

現在、ドロップダウンに 5 つの「未定義」項目のリストが返されています。ajax レスポンスを配列と json エンコードの両方でフォーマットしようとしました。

ajax 呼び出しに応答している php リソースをテストしました。この uri をロードすると、次のようになります。

ブラウザで検索用語を使用すると、次の形式で正しい結果が得られます。

コンソール出力から、ajax 呼び出しがトリガーされ、成功していることがわかります。

HTML:

JavaScript:

提供できるすべての助けに感謝します。

Typeahead + Bloodhound をセットアップして、フィールドで提案を使用して検索を実行しようとしています。フィールドの HTML コードは次のとおりです。

Symfony の 2 つの主な関数を使用します。1 つはすべての製品を返し、これを a として使用し、もう 1 つprefetchはフィルタリングされた製品に使用します。これは、その関数のルートがどのように見えるかです:

ご覧のとおり、最初のものはすべての製品を JSON 値として返すため、パラメーターを取得しませんでしたが、2 番目のものは{filter}実行の引数として取りLIKE、フィルター処理された製品のみを返します。

今、ブラッドハウンドの仕組みがまったくわからないので、ドキュメントを読み、タイプアヘッドのためにドキュメントを読み、ここから例を挙げて、Remoteこのコードを作成しました:

そうですか？つまり、ページが読み込まれると、すべての製品がプリフェッチされますが、.typeahead要素に何か入力すると、フィルタリングされたものだけが取得されますか? フィルタリングされた値を取得するためにルートに%query渡す必要がある正しい値であるかどうかはわかりません。filter_products何か助けはありますか？

Typeahead + Bloodhound を使用するのはこれが初めてです

Typeahead.js/Bloodhoundを使用して自分の Web サイトに入力候補機能を実装していますが、Bloodhound を動作させることができません。コードは次のとおりです。

以下は、indicator.json の一部です。

何らかのデータが入っていることを期待していましindicator_commandsたが、何も表示されませんでした。動作させるには何を変更する必要がありますか?

私はブラッドハウンド提案エンジンでツイッターのタイプアヘッドを使用していますが、すべて正常に動作しています。以下は私のコードスニペットです

投稿ボタンを表示するなどの操作を行いたいのですが、リモート サーバーからの結果がゼロの場合に、このイベントをキャッチするにはどうすればよいですか?