Typeahead.js，获取远程数据后搜索不起作用

Question

Typeahead.js 在请求远程数据后不更新搜索索引。

我键入一个查询，它获取结果，然后它总是显示前 N 个项目，而不考虑查询。 我在控制台中使用了bloodhound_inst.search('lemon', sync, async)函数，无论文本匹配如何，它都会返回整个远程数据集。

例如，此查询将返回“apple”、“pizza”以及从服务器返回的任何内容。

我希望它能够获取远程数据，然后像往常一样提供搜索结果。 是否期望遥控器提供正确的数据？ 我只是通过服务器['lemon', 'banana', 'apple', 'whatever']的项目测试列表作为响应。

<script>
  var food_name= '<%= @food.name %>';

  var food_items = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
      url: '../food_item_search?food_name_q=%QUERY',
      wildcard: '%QUERY'
    }
  });

  var engine = food_items.initialize(true);

  $('.typeahead').typeahead(null, {
    limit: 7,
    source: food_items
  })

</script>

Answer 1

你猜对了。 它期望遥控器执行搜索。

如果您想加载所有数据，然后让它为您搜索该数据，您将使用本地，而不是远程。 我是这样完成的：

ajaxGet('/manage/persontypeahead')
    .done(function (r) {
        applyNamesTypeahead(r.ViewModel);
    });

其中 applyNamesTypeahead 使用加载的数据并构建 Bloodhound：

function applyNamesTypeahead(local) {
    var namesBloodhound = new Bloodhound({
        local: local,
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('Name')
    });

然后，构建 Typeahead：

    $('#Name').typeahead({
        hint: true,
        classNames: {
            menu: 'dropdown-menu',
            suggestion: 'dropdown-item',
            cursor: 'active'
        }
    }, {
        source: namesBloodhound,
        display: 'Name'
    });

我在此处包含了 classNames，以展示我们如何使用标准 Bootstrap 5 来呈现 Twitter Typeahead，而无需自定义样式。