typeahead.js oder Bluthund funktioniert nicht für mich

Ich bekomme keine Vorschläge. Was bin ichtypeahead.js oder Bluthund funktioniert nicht für mich

var states = new Bloodhound({ 
    // datumTokenizer : function(d){return Bloodhound.tokenizers.whitespace(d.name) }, 
    datumTokenizer : Bloodhound.tokenizers.whitespace("name"), 
    queryTokenizer : Bloodhound.tokenizers.whitespace, 
    // local : states 
    prefetch : "http://localhost:3000/all.json" 
}) 
console.log(states) 
states.initialize() 
$("#prefetch .typehead").typeahead({ 
    hint : true, 
    hightlight : true, 
    minLength : 1, 

},{ 
    name : "states", 
    source : states, 
    display : "name", 
    displayKey : "name" 
})

JSON wie diese

[{"_id":"573ff845d35b36f82c6cc71e","created_at":"2016-05-21T05:55:17.335Z","inc":0,"updated_at":"2016-05-21T05:56:23.569Z","name":"comp1","pizza":"pizza1","ranking":20,"num":3,"__v":0},{"_id":"573ff845d35b36f82c6cc71f","created_at":"2016-05-21T05:55:17.340Z","inc":0,"updated_at":"2016-05-21T05:55:17.340Z","name":"comp2","pizza":"pizza2","ranking":5,"num":1,"__v":0},{"_id":"573ff845d35b36f82c6cc720","created_at":"2016-05-21T05:55:17.342Z","inc":0,"updated_at":"2016-05-21T05:55:17.342Z","name":"comp3","pizza":"pizza3","ranking":10,"num":1,"__v":0}]

Quelle

2016-05-22 jack blank

Legen Sie ein templates Objekt eine suggestion Eigenschaft, die eine Funktion eine html Zeichenfolge enthält Vorschlag der Rückkehr angezeigt werden soll.

Ersatz datumTokenizer: Bloodhound.tokenizers.obj.whitespace("name") für datumTokenizer: Bloodhound.tokenizers.whitespace("name"); Fügen Sie .ttAdapter() folgende Einstellung states bei source hinzu.

Nicht sicher, welche Eigenschaft des Objekts ausgewählt oder andere html sollte im Vorschlagsbehälter angezeigt werden? Gebrauchte pizza Eigenschaft des ausgewählten Objekts an stacksnippets

$(function() { 
 

 
    var states = new Bloodhound({ 
 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace("name"), 
 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
 
    prefetch: "https://gist.githubusercontent.com/guest271314/" 
 
       + "5b1b22a728f97a8847034c3f9dba69b0/raw/" 
 
       + "fc016e61fed65b45e027837dada9f60e6793bc4b/comp.json" 
 
    }); 
 

 
    states.initialize(); 
 

 
    $("#prefetch.typeahead").typeahead({ 
 
    minLength: 1, 
 
    hint: true, 
 
    highlight: true 
 
    }, { 
 
    name: "suggestions", 
 
    display: "name", 
 
    templates: { 
 
     suggestion: function(data) { 
 
     console.log(data); 
 
     // set `html` to be displayed at suggestion dropdown 
 
     var suggest = "<li>" + data.pizza + "</li>"; 
 
     return suggest 
 
     } 
 
    }, 
 
    source: states.ttAdapter() 
 
    }); 
 
})

div.search { 
 
    font-family: sans-serif; 
 
    position: relative; 
 
    margin: 100px; 
 
} 
 
.typeahead, 
 
.tt-query, 
 
.tt-hint { 
 
    border: 2px solid #CCCCCC; 
 
    border-radius: 8px; 
 
    font-size: 24px; 
 
    height: 30px; 
 
    line-height: 30px; 
 
    outline: medium none; 
 
    padding: 8px 12px; 
 
    width: 396px; 
 
} 
 
.typeahead { 
 
    background-color: #FFFFFF; 
 
} 
 
.typeahead:focus { 
 
    border: 2px solid #0097CF; 
 
} 
 
.tt-query { 
 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; 
 
} 
 
.tt-hint { 
 
    color: #999999; 
 
} 
 
.tt-dropdown-menu { 
 
    background-color: #FFFFFF; 
 
    border: 1px solid rgba(0, 0, 0, 0.2); 
 
    border-radius: 8px; 
 
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
 
    margin-top: 12px; 
 
    padding: 8px 0; 
 
    width: 422px; 
 
} 
 
.tt-suggestion { 
 
    font-size: 24px; 
 
    line-height: 24px; 
 
    padding: 3px 20px; 
 
} 
 
.tt-suggestion.tt-is-under-cursor { 
 
    background-color: #0097CF; 
 
    color: #FFFFFF; 
 
} 
 
.tt-suggestion p { 
 
    margin: 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script> 
 
    </head> 
 
    <body> 
 
    <div class="search"> 
 
    <input type="text" id="prefetch" class="typeahead" placeholder="search" /> 
 
     </div> 
 
    </body> 
 
</html>

Quelle

2016-05-22 03:46:31 guest271314

Vielen Dank für Ihre Antwort, aber das funktioniert nicht. Nur um zu verdeutlichen, wenn Sie '/ * set data property zu render * /' sagen, bedeutet das, dass ich 'data.name' verwenden sollte, um die Werte für den' name' Schlüssel in meinem jSON zu erhalten? Ich habe das gemacht und es funktioniert nicht. vielleicht stimmt etwas mit meinem JSON nicht und ich habe das 'states.ttAdapter()' und das fehlende Komma vor 'templates' hinzugefügt. –

@jackblank Welche Eigenschaft des übereinstimmenden Objekts sollte als Vorschlag angezeigt werden? – guest271314

@jackblank Siehe aktualisierten Beitrag. Verwendete 'Pizza'-Eigenschaft des ausgewählten Objekts als Vorschlag angezeigt – guest271314

typeahead.js oder Bluthund funktioniert nicht für mich

Antwort

Verwandte Themen