typeahead plusieurs champs html

Question

Je cette JSON venir pour typeahead:

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

Et le code de mon dossier pour travailler avec typeahead

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...' 
    } 
}); 

Je rends facilement à mes suggestions déroulantes html la les données que je reçois du "q" ou du "count".

Le problème est que je ne peux pas envoyer les deux, comme vous pouvez le voir dans le code.

Comment puis-je envoyer les deux, afin que je puisse afficher les tags et le nombre de messages liés à eux?

Merci.

Answer 1

Merci de tout le monde, je comprends maintenant comment il fonctionne et spécialement à Madalin Ivascu. J'amélioré mon code et cela a fonctionné de cette façon:

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

Utilisez un modèle personnalisé

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

Answer 3

Vous pouvez concaténer les tableaux retournés à l'aide Bloodhound$.map() et Array.prototype.concat().

Vous pouvez ensuite filtrer les suggestions à suggestion propriété de templates objet passé à .typeahead(). Dans stacksnippets, les propriétés q et count sont ajoutées au HTML en tant que suggestions pour chaque correspondance de valeurs q ou 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>