typeahead.js-匹配查询开始的结果

Question

我使用Twittertypeahead.js搜索名单的名字和客户端希望根据名字的建议。

有没有一个选项可以让Twittertypeahead.js搜索查询与每个结果的开头相匹配，而不是字符串中的任何位置？

我可以在\u updateHint函数中看到一个beginsWithQuery变量，但是我不知道如何将其指定为一个选项，甚至不知道这是否与我试图实现的目标有关。

在我的项目中调用typeahead的jQuery函数是：

$( 'input[name="s"]' )
  .typeahead( {
      name: 'search',
      remote: wp_typeahead.ajaxurl + '?action=ajax_search&fn=get_ajax_search&terms=%QUERY',
      template: [
        '<p><a href="{{url}}">{{value}}</a></p>',
    ].join(''),
      engine: Hogan
  } )
);

我可以看到来自ajax_search的响应格式

[
  { "tokens" : [ "First","Last" ],
    "url" : "http://url/for/first-last/",
    "value" : "First Last" },
]

所以我需要弄清楚如何过滤这个JSON，以便只包含与搜索查询匹配的令牌[0]的数据。

编辑：根据下面@jharding的anwser，关于我必须添加哪些内容来实施预回迁解决方案工作的附加说明。

这是一个WordPress网站，该网站正在搜索的名称是自定义帖子类型“模型”的标题。我创建了一个名为list-all-models.php的文件，它以所需的数据格式输出html" target="_blank">模型名称的数组。

<?php
define('WP_USE_THEMES', false);
require('../../../../wp-load.php'); // depends on where this file is

$args = array (
    'post_type' => 'model',
    'orderby' => 'title',           
    'order' => 'asc',
    'posts_per_page' => -1
);

$models = get_posts($args);

$model_names = array();

foreach ($models as $i => $model) {
    $model_names[$i]['value']   = $model->post_title;
    $model_names[$i]['url']     = $model->guid;
    $model_names[$i]['tokens']  = explode(' ', $model->post_title);
}

header("Content-type: application/json");
die(json_encode($model_names));
?>

然后，我在预回迁选项中将此文件的URL用作URL参数。

现在搜索完全按照预期进行：）

Answer 1

适当的解决办法是：

 matcher: function (item) {
                        if (item.toLowerCase().indexOf(this.query.trim().toLowerCase()) == 0) {
                            return true;
                        }

Answer 2

所以首先，typeahead.js不对Remote返回的数据进行任何过滤。预计Remote返回的数据已经包含了对给定查询的有效建议。

如果您希望typeahead.js处理查询的匹配建议，那么使用prefetch可能是一个更好的选择，因为您有大约700个条目，您应该会看到相当稳定的性能。如果你选择走这条路，你会想做这样的事情：

$('input[name="s"]').typeahead({
  name: 'search',
  prefetch: {
    url: '/path/to/json/file/that/returns/all/entries',
    filter: removeLastNameFromTokens
  },
  template: '<p><a href="{{url}}">{{value}}</a></p>',
  engine: Hogan
});

function removeLastNameFromTokens(data) {
  var datum, firstName;

  for (var i = 0; i < data.length; i++) {
    datum = data[i];
    datum.tokens.pop(); // assumes tokens looks like [First, Last]
  }

  return data;
}

假设/path/to/json/file/that/returns/all/entries指向包含一组数据的json文件，removeLastNameFromTokens将遍历每个数据，并从标记中删除姓氏，只留下名字。这将产生您想要的功能。

另一个好策略是结合使用预取和远程。您可以在预回迁数据中包含大约100个最流行的条目，然后在预回迁无法产生足够的建议时，依靠远程来回填建议。