ブートストラップ3 typeahead.js - 先読みの一部の値で照会

Question

入力値の最後の部分でリモートURLを呼び出そうとしています。ドロップダウン項目を選択したときに

ライン

任意のアイデアの最後に新しい値を追加し、

$('#typeahead').typeahead({ 
    remote: { 
     url: '/ajax/tags/get/?name=%QUERY', 
     replace: function (url, query) { 
      var last = query.split(','); 
      last = $.trim(last[last.length-1]); 
      return url.replace('%QUERY', last); 
     } 
    }, 
    limit : 10 
}); 

をして： 私はこのような何かをしたいと思いますその仕事をどうやって作るのですか？ 「最後の部分でのクエリは、」あなたのために働くと仮定すると

Answer 1

ブートストラップ3では、Bootstrap-3-Typeaheadを使用できます。

updaterとmatcher機能を上書きする必要があります。 matcher機能のためには、次のようにあなたの関数を置き換えるからコードを使用することができます。

matcher: function (item) { 
     var last = this.query.split(','); 
     this.query = $.trim(last[last.length-1]); 

     if(this.query.length) return ~item.toLowerCase().indexOf(this.query.toLowerCase()); 
} 

は、あなたのupdateのために、次のコードを使用します

updater: function (item) { 
     return this.$element.val().replace(new RegExp(this.query + '$'),'') + item + ','; 
    } 

（試合の最後の発生から：JavaScript: replace last occurrence of text in a string）

完全な例：

$('.typeahead').typeahead (
{ 
items: 4, 
source: function (query, process) { 
    states = []; 
    map = {}; 


    var data = [ 
     {"stateCode": "CA", "stateName": "California"}, 
     {"stateCode": "AZ", "stateName": "Arizona"}, 
     {"stateCode": "NY", "stateName": "New York"}, 
     {"stateCode": "NV", "stateName": "Nevada"}, 
     {"stateCode": "OH", "stateName": "Ohio"} 
    ]; 

    $.each(data, function (i, state) { 
     map[state.stateName] = state; 
     states.push(state.stateName); 
    }); 

    process(states); 

} 

    , updater: function (item) { 
     return this.$element.val().replace(new RegExp(this.query + '$'),'') + item + ','; 
    } 
    , matcher: function (item) { 
     var last = this.query.split(','); 
     this.query = $.trim(last[last.length-1]); 

     if(this.query.length) return ~item.toLowerCase().indexOf(this.query.toLowerCase()); 
    } 
    } 

); 

Answer 2

、あなたがやりたいvalueとtitle適切なを持っているデータムの配列を移入して返すためにfilter: function(response) {...}を使用することができます。