TypeAhead.js und Bloodhound zeigen eine ungerade Anzahl an Ergebnissen

Question

Ich habe eine TypeAhead/Bloodhound-Implementierung in meinem Frontend, die JSON-Daten von einem Play/Scala-Server holt. Typeahead-Version ist 0.11.1. Die Umsetzung wird wie folgt:

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-Antwort der Server gibt:

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

Die Server-Seiten das Ergebnis so, dass es gibt maximal 5 Ergebnisse, was auch als Standardlimit für Typeahead/Bloodhound gelten soll.

Das Problem ist, dass, wenn der Server 5 Ergebnisse zurückgibt, Typeahead 0 Ergebnisse in der Überlagerung zeigt. Wenn der Server 4 Ergebnisse gibt, zeigt TypeAhead 1 im Overlay. Wenn der Server 3 Ergebnisse gibt, zeigt TypeAhead 2 Ergebnisse. Bei 2 und 1 Ergebnissen wird die korrekte Anzahl der Elemente im Overlay angezeigt. Wenn ich die Seitenlänge entferne und der Server mehr als 10 Ergebnisse zurückgibt, zeigt TypeAhead 5 Ergebnisse (das Limit). console.log innerhalb des Filters zeigt die korrekte Anzahl der Datenergebnisse an, also gehen sie zumindest zu Bloodhound.

Was könnte das Problem mit diesem Code sein? Dieses TypeAhead-Feld ist das einzige auf dieser Seite vorhandene TypeAhead-Feld. Ich habe das DOM überprüft, und TypeAhead erzeugt eine falsche Menge an Resultset-Feldern. Es ist also kein Problem mit CSS (versuchte auch, alle benutzerdefinierten CSS zu entfernen).

Danke für alle Antworten :)

Answer 1

ein Problem auf typeahead im Code Es gibt:

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

Sie können den Code selbst in der JS ändern, wie in der Frage Seite beschrieben.

Answer 2

Versuchen Sie, engine mit engine.initialize() zu initialisieren; Rückgabe suggestion Objekt bei filter, die bei templates ->suggestion verfügbar sein sollte; Initialisierung engine bei source mit source:engine.ttAdapter(); Element wie String um suggestion zurückgeben, um "Vorschlag" Dropdown-Menü zu füllen. Siehe 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

If (ike me) Sie wollen nicht in die typeahead Quelle gehen, (zum Beispiel, weil Sie die min-Version verwenden möchten) können Sie auch sehr Limit einstellen hoch. Sie müssen dann die Anzahl der Elemente begrenzen, die Sie selbst in die Liste aufnehmen möchten.

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

Answer 4

Twitter angeblich abandoned das Projekt. Versuchen Sie the maintained fork. Es hat das Problem behoben.