提前输入多个字段 html

Question

我有这个 JSON 正在输入：

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

以及我的文件代码与 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...'
    }
});

我很容易将我从 "q" 或 "count" 获得的数据呈现到我的 html 下拉建议中。

问题是我无法同时发送它们，如您在代码中所见。

我如何发送两者，以便显示标签和与之相关的帖子数？

谢谢。

Answer 1

使用自定义模板

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

Answer 2

您可以使用 $.map() 和 Array.prototype.concat() 连接在 Bloodhound 处返回的数组。

然后您可以在传递给 .typeahead() 的 templates 个对象的 suggestion 属性过滤建议。在 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>

Answer 3

感谢大家，现在我明白了它是如何工作的，特别感谢 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>';
        }
    }
});

提前输入多个字段 html

Typeahead multiple fields to html

javascript

jquery

typeahead.js