Typeahead multiple fields to html

Question

I have this JSON coming in to typeahead:

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

And the code of my file to work with 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...'
    }
});

I easily render to my html dropdown suggestions the data that I get from the "q" or the "count".

The problem is that I cant send both of them, as you can see in the code.

How can I send both, so I can show the tags and the count of posts related to them?

Thanks.

Answer 1

Thank's to everyone, now I understand how it works and specially to Madalin Ivascu. I improved my code and it worked by this way:

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

You can concatenate the arrays returned at Bloodhound using $.map() and Array.prototype.concat().

You can then filter suggestions at suggestion property of templates object passed to .typeahead(). At stacksnippets both q and count properties are appended to HTML as suggestions for each match of either q or count values.

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

Answer 3

Use a custom template

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