2015-09-12 46 views
1

我正在嘗試使用typeahead.js在窗體中顯示ajax結果。 起初我嘗試Bloodhound建議引擎默認與typeahead來。但它沒有顯示服務器返回的所有項目(我只顯示1或有時兩個)。爲什麼typeahead.js沒有顯示ajax響應中的所有項目?

以下是我使用的代碼;

$('.autocomplete').livequery(function() { 
      var input = this; 
      $(input).removeClass('autocomplete'); 

      var _source = new Bloodhound({ 
       limit: 25, 
       datumTokenizer: Bloodhound.tokenizers.obj.whitespace('Value'), 
       queryTokenizer: Bloodhound.tokenizers.obj.whitespace('Text'), 
       prefetch: $(input).attr('data-source'), 
       remote: { 
        url: $(input).attr('data-source') + '?query=%QUERY', 
        wildcard: '%QUERY' 
       } 
      }); 

      _source.initialize(); 

      $(input).typeahead({ 
       hint: true, 
       highlight: true, 
       minLength: 0 
      }, { 
       displayKey: 'Text', 
       source: _source, 
       templates: { 
        notFound: 'No results found' 
       } 
      }); 

      $(input).on('typeahead:selected', function (evt, item) { 
       $(input).parent().parent().find('input[type="hidden"]').val(item.Value); 
      }); 
     }) 

然後我試着用沒有血獵犬的方式做下面的代碼,結果沒有任何變化;

$('.autocomplete').livequery(function() { 
      var input = this; 
      $(input).removeClass('autocomplete'); 

      $(input).typeahead({ 
       hint: true, 
       highlight: true, 
       limit: 50, 
       minLength: 0 
      }, { 
       displayKey: 'Text', 
       source: function (query, syncResults, asyncResults) { 
        $.get($(input).attr('data-source') + '?query=' + query, function (data) { 
         asyncResults(data); 
        }); 
       }, 
       templates: { 
        notFound: 'No results found' 
       } 
      }); 

      $(input).on('typeahead:selected', function (evt, item) { 
       $(input).parent().parent().find('input[type="hidden"]').val(item.Value); 
      }); 
     }) 

服務器對請求的響應如下;

[ 
{ 
    "Text": "Marketing Executive", 
    "Value": 1 
}, 
{ 
    "Text": "CEO", 
    "Value": 5 
}, 
{ 
    "Text": "Manager", 
    "Value": 6 
}, 
{ 
    "Text": "Accountant", 
    "Value": 7 
}] 

這是什麼問題?以及如何獲得打印以顯示服務器返回的所有結果?

+0

默認只有5建議將顯示,使用'限制'選項來增加它。檢查[文檔](https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#options) –

+0

@JSantosh'極限:50',檢查問題。 – zeroflagL

+0

你看不到50個結果吧? –

回答

2

這是控件中的一個錯誤。這可以在typeahead.bundle.js

開關線1723和1724是固定由下面的代碼更改,以便它看起來像這樣

that._append(query, suggestions.slice(0, that.limit - rendered)); 
rendered += suggestions.length; 

榮譽的職位Bootstrap Typeahead not showing hints as expected

相關問題