typeahead.jsまたはbloodhoundが私のために働いていない

私は何の提案もありません。どのような私は、表示する提案を含むhtml文字列を返す関数であるsuggestion性を有するtemplatesオブジェクトを設定し、このtypeahead.jsまたはbloodhoundが私のために働いていない

[{"_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}]

出典

2016-05-22 jack blank

よう

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をしないのです。

datumTokenizer: Bloodhound.tokenizers.obj.whitespace("name")の代わりにdatumTokenizer: Bloodhound.tokenizers.whitespace("name"); statesをsourceに設定して.ttAdapter()を追加します。

選択されたオブジェクトのプロパティ、またはhtmlを提案コンテナに表示する必要がありますか？ 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>

出典

2016-05-22 03:46:31 guest271314

ご回答をお寄せいただきありがとうございますが、これは動作していない時に選択したオブジェクトのpizzaプロパティを使用します。 '/ * set data property to render * /'と言うと、 'data.name'を使ってjSONの' name'キーの値を取得する必要があることを意味します。私はそれをして、それは動作していない。多分私のJSONに何か問題があり、 'states.ttAdapter（）'と 'templates'の前になかったカンマを追加しました。 –

@jackblank一致するオブジェクトのどのプロパティを提案として表示する必要がありますか？ – guest271314

@jackblank更新された投稿を参照してください。選択されたオブジェクトの 'pizza'プロパティが表示されました。 – guest271314

typeahead.jsまたはbloodhoundが私のために働いていない

答えて

関連する問題