Jquery Typeahead

Question

私はJquery Typeaheadを使用してjsonファイルから検索フィールドを作成しようとしていますが、この例に基づいてgoogle検索と同様の検索入力に自動補完プレビューを表示します：Beer v1）。

HTML

<form> 
    <div class="typeahead__container"> 
     <div class="typeahead__field"> 
     <span class="typeahead__query"> 
      <input class="js-typeahead-input" 
        name="q" 
        type="search" 
        autofocus 
        autocomplete="off"> 
     </span> 
     </div> 
    </div> 
</form> 

JAVASCRIPT

var data = { 
    countries: ["Afghanistan", "Albania", "Algeria"], 
    capitals: ["Abu Dhabi", "Abuja", "Accra"] 
}; 
typeof $.typeahead === 'function' && $.typeahead({ 
    input: ".js-typeahead-input", 
    minLength: 1, 
    order: "asc", 
    group: true, 
    maxItemPerGroup: 5, 
    groupOrder: function() { 
     var scope = this, 
      sortGroup = []; 
     for (var i in this.result) { 
      sortGroup.push({ 
       group: i, 
       length: this.result[i].length 
      }); 
     } 
     sortGroup.sort(
      scope.helper.sort(
       ["length"], 
       true, // false = desc, the most results on top 
       function (a) { 
        return a.toString().toUpperCase() 
       } 
      ) 
     ); 
     return $.map(sortGroup, function (val, i) { 
      return val.group 
     }); 
    }, 
    hint: true, 
    dropdownFilter: "All", 
    template: "{{display}}, <small><em>{{group}}</em></small>", 
    emptyTemplate: "nothing for : {{query}}", 
    source: { 
     country: { 
      data: data.countries 
     }, 
     capital: { 
      data: data.capitals 
     } 
    }, 
    debug: true 
}); 

私はこの問題は、私はJSONファイルを追加することができないということです

    source: { 
        "coutries": { 
            ajax: { 
                url: "coutries.json", 
                path: "data" 
            } 
        }, 
        "capitals": { 
            ajax: { 
                url: "capitals.json", 
                path: "data" 
            } 
        }, 
} 

によって実際のソースを交換しようとしました結果を読み込む〜から。

最終的な結果は次のようになります。

Answer 1

あなたは、AJAXを使用することができます - データベースからか、あなたが望む他の場所からデータを取得する方法をGET。 次のスクリプト参照してください。

$(document).ready(function(){ 
    $.ajax({ 
     type: "GET", 
     url: "your ajax url", 
     dataType: "json", 
     success: function(data) { 
      typeof $.typeahead === 'function' && $.typeahead({ 
       input: ".js-typeahead-input", 
       minLength: 1, //minimum character length 
       order: "asc", 
       hint: true, 
       source: data, 
       debug: true 
      }); 
     } 
});