TypeAhead.js和Bloodhound顯示奇數個結果

Question

我的前端有一個TypeAhead/Bloodhound實現，它從Play/Scala服務器獲取JSON數據。 Typeahead版本是0.11.1。實現如下：

HTML：

<div id="typeahead" class="col-md-8"> 
    <input class="typeahead form-control" type="text" placeholder="Select the user"> 
</div> 

的JavaScript：

var engine = new Bloodhound({ 
    datumTokenizer: function (datum) { 
    var fullName = fullName(datum); 
    return Bloodhound.tokenizers.whitespace(fullName); 
    }, 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    identify: function(obj) { return obj.id; }, 
    remote: { 
    url: routes.controllers.Users.index("").url, 
    cache: false, 
    replace: function (url, query) { 
     if (!isEmpty(query)) { 
      url += encodeURIComponent(query); 
     } 
     return url; 
    }, 
    filter: function (data) { 
     console.log(data); 
     return $.map(data, function (user) { 
      return { 
       id: user.id, 
       fullName: viewModel.fullName(user) 
      }; 
     }); 
    } 
} 
}); 

// instantiate the typeahead UI 
$('#typeahead .typeahead') 
.typeahead({ 
    hint: true, 
    highlight: true, 
    minLength: 1, 
}, 
{ 
    name: 'engine', 
    displayKey: 'fullName', 
    source: engine 
}) 

function fullName(data) { 
    if (data === undefined) return ""; 
    else { 
    var fName = data.firstName === undefined ? "" : data.firstName; 
    var lName = data.lastName === undefined ? "" : data.lastName; 
    return fName + ' ' + lName; 
    } 
}; 

JSON響應服務器對：

[{"firstName":"Test","lastName":"User", "id":1}, ... ] 

服務器頁面的結果，使其最多給出5個結果，這應該是Typeahead/Bloodhound的默認限制。

問題是，當服務器返回5個結果時，Typeahead在疊加層中顯示0個結果。如果服務器提供4個結果，則TypeAhead在疊加層中顯示1。如果服務器提供3個結果，則TypeAhead會顯示2個結果。對於2和1的結果，它會在疊加層中顯示正確的元素數量。如果我刪除頁面長度並且服務器返回10個以上的結果，則TypeAhead會顯示5個結果（限制）。過濾器中的console.log顯示正確數量的數據結果，所以他們至少會使用Bloodhound。

這段代碼可能存在什麼問題？此TypeAhead字段是此頁面中唯一的TypeAhead字段。我檢查了DOM，並且TypeAhead產生了錯誤的結果集字段數量，所以它不是CSS的問題（也嘗試刪除所有自定義CSS）。

感謝您的答覆:)

Answer 1

有在代碼預輸入一個問題：

https://github.com/twitter/typeahead.js/issues/1218

可以作爲問題頁所述改變自己的代碼中的JS。

Answer 2

嘗試初始化engine與engine.initialize();返回suggestion對象filter，應在templates→suggestion;初始化engine在source與source:engine.ttAdapter();返回元素String在suggestion，填充「建議」下拉菜單。見Typeahead - examples - Custom Templates

var data = [{ 
 
    "firstName": "Test", 
 
    "lastName": "User", 
 
    "id": 1 
 
}, { 
 
    "firstName": "Test2", 
 
    "lastName": "User2", 
 
    "id": 2 
 
}, { 
 
    "firstName": "Test3", 
 
    "lastName": "User3", 
 
    "id": 3 
 
}, { 
 
    "firstName": "Test4", 
 
    "lastName": "User4", 
 
    "id": 4 
 
}, { 
 
    "firstName": "Test5", 
 
    "lastName": "User5", 
 
    "id": 5 
 
}]; 
 

 
var engine = new Bloodhound({ 
 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"), 
 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
 
    local: $.map(data, function(val, key) { 
 
      // return `suggestion` object for `templates` `suggestion`   
 
      return {value:val.firstName, suggestion:val} 
 
     }) 
 
}); 
 
// initialize `engine` 
 
engine.initialize(); 
 

 
// instantiate the typeahead UI 
 
$("#typeahead .typeahead") 
 
    .typeahead({ 
 
    hint: true, 
 
    highlight: true, 
 
    minLength: 1, 
 
    }, { 
 
    name: "engine", 
 
    displayKey: "firstName", 
 
    templates: { 
 
     suggestion: function (data) { 
 
     // `suggestion` object passed at `engine` 
 
     console.log(data.suggestion); 
 
     // return suggestion element to display 
 
     var _suggestion = "<div>" 
 
         + data.suggestion.firstName 
 
         + " " 
 
         + data.suggestion.lastName + "</div>"; 
 
     return _suggestion 
 
     } 
 
    }, 
 
    source: engine.ttAdapter() 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script> 
 
<div id="typeahead" class="col-md-8"> 
 
    <input class="typeahead form-control" type="text" placeholder="Select the user"> 
 
</div>

Answer 3

如果（IKE我）你不想（因爲你想用最小的版本爲例），以進入預輸入源，您還可以設置限制非常高。然後，您將不得不限制自己放入列表的項目數量。

$('#typeahead .typeahead') 
.typeahead({ 
    hint: true, 
    highlight: true, 
    minLength: 1, 
}, 
{ 
    name: 'engine', 
    displayKey: 'fullName', 
    source: engine, 
    limit: 1000 
}) 

Answer 4

Twitter推測abandoned該項目。嘗試the maintained fork。它解決了這個問題。