事先鍵入的內容多領域的HTML

Question

我有這樣的JSON進來的預輸入：

[{"q": "#django", "count": 3}, {"q": "#hashtag", "count": 3}, {"q": "#hashtags", "count": 0}, {"q": "#google", "count": 1}] 

我的文件的代碼與預輸入工作

var hashTags = new Bloodhound({ 
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('q'), 
queryTokenizer: Bloodhound.tokenizers.whitespace, 
prefetch: '/hashtag.json?q=%QUERY', 
remote: { 
url: '/hashtag.json?q=%QUERY', 
wildcard: '%QUERY' 
} 
}); 

$('.search-tag-query').typeahead({ 
    hint:true, 
    highlight: true, 
    // autoselect: true, 
    minLength:1, 
    limit: 10, 
}, 
    { 
    name: 'hashTags', 
    display: 'q', 
    // displayKey: 'count', 
    source: hashTags.ttAdapter(), 
    templates: { 
     empty: 'No results...' 
    } 
}); 

我很容易使我的HTML下拉建議的我從「q」或「count」得到的數據。

問題是我不能發送它們兩個，就像你在代碼中看到的那樣。

我怎樣才能發送這兩個，所以我可以顯示標籤和相關帖子的數量？

謝謝。

Answer 1

感謝的每個人，現在我明白它是如何工作的，並特意Madalin Ivascu。我提高了我的代碼和它的工作通過這種方式：

var hashTags = new Bloodhound({ 
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('q'), 
queryTokenizer: Bloodhound.tokenizers.whitespace, 
prefetch: '/hashtag.json?q=%QUERY', 
remote: { 
url: '/hashtag.json?q=%QUERY', 
wildcard: '%QUERY' 
} 
}); 

$('.search-tag-query').typeahead({ 
    hint:true, 
    highlight: true, 
    // autoselect: true, 
    minLength:1, 
    limit: 10, 
}, 
    { 
    name: 'hashTags', 
    display: 'q', 
    // displayKey: 'count', 
    source: hashTags.ttAdapter(), 
    templates: { 
     // empty: 'No results...', 
     suggestion: function (data) { 
      return '<p><strong>' + data.q + '</strong> – ' + data.count + '</p>'; 
     } 
    } 
}); 

Answer 2

使用自定義模板

suggestion: function(data) { 
    return '<p><strong>' + data.q+ '</strong> – ' + data.count+ '</p>'; 
} 

Answer 3

您可以連接陣列在Bloodhound使用$.map()和Array.prototype.concat()返回。

然後，您可以在suggestion處過濾建議templates物件傳遞給.typeahead()。在stacksnippets上，q和count屬性都附加到HTML，作爲對q或count值的每個匹配的建議。

$(function() { 
 
var data = [{"q": "#django", "count": 3}, {"q": "#hashtag", "count": 3}, {"q": "#hashtags", "count": 0}, {"q": "#google", "count": 1}]; 
 

 

 

 
var suggestions = new Bloodhound({ 
 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), 
 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
 
    local: $.map(data, function(d) { 
 
    return { 
 
     value: d.q, 
 
     suggest: d 
 
    } 
 
    }) 
 
    // here we concatenate the two arrays 
 
    .concat($.map(data, function(d) { 
 
    return { 
 
     value: d.count, 
 
     suggest: d 
 
    } 
 
    })) 
 
}); 
 

 
suggestions.initialize(); 
 

 
$(".bs-example .typeahead").typeahead({ 
 
     minLength: 1, 
 
     hint: true, 
 
     highlight: true 
 
    }, { 
 
     name: "suggestions", 
 
     displayKey: "value", 
 
     templates: { 
 
      suggestion: function(data) { 
 
       console.log(data); 
 
       var details = "<div class=resultContainer>" 
 
           + data.value 
 
           + "<br>" 
 
           + (data.suggest.count == data.value 
 
           ? data.suggest.q 
 
           : data.suggest.count) 
 
           + "</div>"; 
 
       return details 
 
      } 
 
     }, 
 
     source: suggestions.ttAdapter() 
 
}); 
 

 
})

.bs-example { 
 
    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: 200px; 
 
} 
 
.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; 
 
} 
 
.resultDesc, 
 
.resultLabel { 
 
    font-size: 14px; 
 
    font-style: italic; 
 
}

<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> 
 

 

 

 
<div class="bs-example"> 
 
    <input type="text" class="typeahead tt-query" placeholder="q and count" /> 
 
</div>