2

我正在使用 Twitter typeahead.js 搜索名称列表，并且客户希望根据名字获得建议。

是否可以选择让 Twitter typeahead.js 将搜索查询与每个结果的开头匹配，而不是字符串中的任何位置？

我可以beginsWithQuery在函数中看到一个变量_updateHint，但是我不知道如何将其指定为选项，或者即使这与我想要实现的目标有关。

在我的项目中调用 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_searchis 格式的响应

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

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

编辑：关于我必须添加什么来实现prefetch解决方案工作的附加说明，按照下面的@jharding 的anwser。

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

<?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 作为prefetch选项中的 url 参数。

现在搜索完全按预期工作:)

4

2 回答 2

1

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

prefetch如果您期望 typeahead.js 处理与查询匹配的建议，并且由于您有大约 700 个条目，您应该会看到相当可靠的性能，这听起来像 using可能是一个更好的选择。如果你选择走这条路，你会想做这样的事情：

$('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将遍历每个数据并从 中删除姓氏tokens，只留下名字。这应该会产生您正在寻找的功能。

另一个好的策略是使用prefetch和的组合remote。您可以在数据中包含 100 个左右最受欢迎的条目，然后在无法产生足够的建议时prefetch依靠remote回填建议。prefetch

于 2013-07-11T21:04:15.220 回答
0

适当的解决方案是：

 matcher: function (item) {
                        if (item.toLowerCase().indexOf(this.query.trim().toLowerCase()) == 0) {
                            return true;
                        }
于 2013-09-13T11:58:03.373 回答