Question

我正在使用typeahead.js，除了一件事以外，一切正常。

我在建议下拉列表中只显示5个条目，但如果有更多结果，我想向用户显示，结果更多（但不是结果本身，只是信息，还有更多结果）所以他继续打字。

我不想要滚动条
我不想显示其他结果
只是一个信息，还有更多结果

请参阅随附的屏幕。

enter image description here

Answer 1

您可以使用仅拉出长度的过滤器。在这个例子中，只会显示20个结果，但我希望人们知道是否有更多的结果没有显示。有关将结果放在页脚中的信息，请参阅this。

    var addresses = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('number'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        limit: 20,
        remote: {
            url: 'url?q=%QUERY',
            filter: function(list) {
                $('#search-total').html(list.length);
                return list;
            }
        }
    });

Answer 2

我正在寻找完全相同的东西并认为，这就是你所需要的（见2014年2月4日jharding的评论）： https://github.com/twitter/typeahead.js/issues/642#issuecomment-34025203

链接中的示例也适用于footer模板，如下所示。

您可以从Bloodhound的filter函数（您可以访问AJAX请求的结果）中保存DOM中某处的结果数量，如下所示：

var bloodHound = new Bloodhound({
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  limit: 5,
  remote: {
      url: url+'%QUERY',
      filter: function (srcs) {
        // store field JSON response to the DOM
        $('#num-results').html(srcs.numResults);
        ...
      }
    }
});
bloodHound.initialize();

现在是上面链接的关键点：您可以包装Handlebars模板（实际上是一个函数）并以这种方式扩展/替换传递给模板的Handlebars上下文：

var footerTmpl = Handlebars.compile('{{numResults}} results for {{query}}');

var footer = function(context) {
  var numResults = $('#num-results').html();
  var data = { 'numResults': numResults, 'query': context.query };
  return footerTmpl(data);
}

// ...
templates: {
  footer: footer
}
// ...

Answer 3

问题可能实际上来自596

上的bloodhound

enter image description here

Answer 4

Typeahead.js有一个页脚模板。此文档的文档：

footer - 渲染在数据集的底部。可以是HTML 字符串或预编译的模板。如果它是预编译的模板，那么传入上下文将包含query和isEmpty。

因此，这将不允许您发送建议对象作为上下文，您可以用它来报告搜索计数（即＆＃34; 23结果＆＃34;消息在你的例子）。它只使用查询和isEmpty，例如

footer: Handlebars.compile("<b>Searched for '{{query}}'</b>")

使用Handlebars模板引擎的typeahead.js示例可在此处找到：

http://jsfiddle.net/Fresh/d7jdp03d/

Answer 5

我正在寻找同样的事情，并遇到了你的问题。我终于想出来了，所以希望这会有所帮助。对于上下文，这是一个Backbone / Marionette应用程序，所以我的解决方案可能有点特定于它的设置方式。结果计数显示在header模板定义jQuery#typeahead(options, [*datasets])中，该模板在我的输入元素上调用（用户在其搜索查询中键入）。

在函数new Bloodhound中发生的source的初始化中，我将结果计数设置在过滤器选项中。我将它保存到ItemView上的变量中。我通过在开头将其保存到变量this来攻击self（Marionette.ItemView）。请务必return results。

source: function () {
  var self = this;
   return new Bloodhound({
   datumTokenizer: Bloodhound.tokenizers.whitespace,
   queryTokenizer: Bloodhound.tokenizers.whitespace,
   remote: {
    url: 'my/search/endpoint',
    filter: function (results) {
      self.resultsCount = results.length;
      return results;
    }
  }
 })
}

在预先调用中调用此函数source：

$('.typeahead').typeahead({
  minLength: 3,
  highlight: true
},
{
  name: 'my-dataset',
  source: this.source(),
  templates: {
    header: require('my/header_template'),
    empty: require('my/empty_template'),
    suggestion: require('my/suggestion_template')
  }
});

这发生在Marionette.ItemView的onRender中，然后我可以将this.resultsCount的值插入到标题模板中的DOM元素中。您可以使用typeahead:render活动。在这里，我基本上检查我的DOM元素是否存储计数，并显示总计数减去tt-menu中显示的项目数（我只计算了多少{{1}在页面上）。我隐藏了＆＃34;更多＆＃34;链接，直到通过点击显示更多内容。

tt-suggestion

希望这有帮助！

Answer 6

这是一个古老的问题，但我花了很多时间才弄清楚这样的简单事情。这是我的尝试

初始化全局变量

    datasetname.setDrawValues(false);

然后添加过滤器并更新全局变量。

var totalSearchResults;

init typhead

   var engine = new Bloodhound({
    remote: {
        url: '/search?q=%QUERY%',
        wildcard: '%QUERY%',
        filter: function (list) {
            window.totalSearchResults = list.length;
            return list;
        }
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title'),
});

在页脚模板中显示结果

$('#demo-input').typeahead({
    hint: true,
    highlight: true,
    minLength: 1,
    limit: 6,
}, {
    templates: {
        suggestion: suggestion_template,
        footer: footer_template,
    }
});

Typeahead.js - 显示有更多结果

6 个答案: