3

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

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

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

/search?searchField=apple

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

["Apple American Group","Apple Financial Holdings Inc","Apple Inc","Appleton Coated LLC","Appleton Inc","Appleton Papers Inc","Dr Pepper Snapple Group Inc","Maui Land & Pineapple Co Inc","Red Apple Group Inc"]

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

XHR finished loading: GET "http://cha.dev:8000/search?searchField=a". jquery.js:9631
send jquery.js:9631
jQuery.extend.ajax jquery.js:9176
b.mixin._get typeahead.bundle.min.js:7
f

HTML:

<div class="form-group" id="bloodhound">
<input type="text" name="searchField" class="form-control typeahead" id="searchId" autocomplete="off" spellcheck="off">
</div>

<!-- just before close of body tag -->
<script src="//code.jquery.com/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="js/typeahead.bundle.min.js"></script>
<script src="js/main.js"></script>

JavaScript:

    var businesses = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: 'search?searchField=%QUERY'
});

businesses.initialize();

$('#searchId').typeahead(null, {
    name: 'businessList',
    displayKey: 'value',
    source: businesses.ttAdapter()
});

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

4

1 に答える 1

0

キーは、返される JSON の重要な部分です。以下の例ではbusiness、キーとして を使用しています。

Javascript:

var businesses = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('business'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: 'search?searchField=%QUERY'
});

businesses.initialize();

$('#searchId').typeahead(null, {
    name: 'businessList',
    displayKey: 'business',
    source: businesses.ttAdapter()
});

返されるデータ:

[ { "business": "Apple American Group"},
  { "business": "Apple Financial Holdings Inc"},
  { "business": "Apple Inc"},
  { "business": "Appleton Coated LLC"},
  { "business": "Appleton Inc"},
  { "business": "Appleton Papers Inc"},
  { "business": "Dr Pepper Snapple Group Inc"},
  { "business": "Maui Land & Pineapple Co Inc"},
  { "business": "Red Apple Group Inc"} ]
于 2014-07-24T22:21:31.543 に答える