mongoose typeahead.js中的`display`选项不起作用

k10s72fa 于 2023-04-21 发布在 Go

关注(0)|答案(1)|浏览(70)

我已经这样做了好几个小时了，我确信我犯了一个愚蠢的错误。但我不知所措...

以下是我检查的内容：
文档：

https://github.com/corejavascript/typeahead.js/blob/master/doc/jquery_typeahead.md#usage
https://github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md#options
堆栈溢出：
typeahead.js doesn't display the dropdown using remote data
Typeahead.js / Bloodhound display just one result
typeahead.js - Displaying all Prefetched Datums
Examples/ google / etc...

这是我的设置。我有一个mongoDB，我已经用mongoose/Node.js创建了一个API搜索路径。我已经验证了搜索API工作正常。

HTML（pug）

.answer-container
    form(method="POST" enctype="multipart/form-data")#answer-form.form
            label(for="new-answer") Answer:
            input(required minlength="1" maxlength="80" type="text" name="new-answer" id="new-answer" placeholder="Answer Text" autocomplete="off").new-answer-input
            br
            input(type="submit" name="submit" disabled autocomplete="off" value="Submit")#answer-submit-button
    .answer-messages

我已验证pug模板是否按预期工作。*

JS（typeahead and bloodhound）

var answer_suggestions = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace("text"),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote:{
            url: 'http://localhost:3000/api/v1/answers/search?text=%QUERY',
            wildcard: '%QUERY'
        }
      });

      $('#new-answer').typeahead({
        hint: true,
        highlight: true,
        autoselect: true,
        minLength: 2
      },
      {
        name: 'answers',
        source: answer_suggestions,
        display: 'text',
        limit: 10
      });

问题如果我删除display选项，我可以看到结果来自API，一切正常。如果我包含它，我不会得到任何结果。

结果Raw results

[
  {
    "_id": "64401c91bc76fdfca320c118",
    "text": "pneumothorax",
    "__v": 0
  },
  {
    "_id": "64403bb708645fb7abbe2db3",
    "text": "pneumothorax",
    "__v": 0
  },
  {
    "_id": "64403bdf08645fb7abbe2dbf",
    "text": "hemopneumothorax",
    "__v": 0
  }
]

我试过将数据重构为JSON对象，我试过在display中使用一个函数，但似乎都不起作用。
所有我想要的是结果列表，只是显示答案文本。

mongoose

来源：https://stackoverflow.com/questions/76058790/display-option-in-typeahead-js-does-not-work

1条答案

按热度按时间

o8x7eapl1#

我已经更新了我的问题，以排除无关的信息，我将在下面提供我的答案。
问题是，当我看到或记录我的数据在typeaheaddisplay函数或在页面本身，它显示我的嵌套数据。困惑？所以我...
以下是我认为我的API将返回到bloodhound的内容

[
  {
    "_id": "64401c91bc76fdfca320c118",
    "text": "pneumothorax",
    "__v": 0
  },
  {
    "_id": "64403bb708645fb7abbe2db3",
    "text": "pneumothorax",
    "__v": 0
  },
  {
    "_id": "64403bdf08645fb7abbe2dbf",
    "text": "hemopneumothorax",
    "__v": 0
  }
]

这就是实际上回来的东西。

{ 
answers:{
[
  {
    "_id": "64401c91bc76fdfca320c118",
    "text": "pneumothorax",
    "__v": 0
  },
  {
    "_id": "64403bb708645fb7abbe2db3",
    "text": "pneumothorax",
    "__v": 0
  },
  {
    "_id": "64403bdf08645fb7abbe2dbf",
    "text": "hemopneumothorax",
    "__v": 0
  }
]
}

我在bloodhound可选的transform函数中记录数据时发现了这个问题。这个额外的对象是我的罪魁祸首。由于bloodhound在输入前剥离了它，所以我从未见过它。

这里是工作代码：

var answer_suggestions = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.whitespace('text'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote:{
            url: 'http://localhost:3000/api/v1/answers/search?text=%QUERY',
            wildcard: '%QUERY',
            transform: (response) => {
                return $.map(response.answers, function(object) {
                  return { text: object.text };
                });
              }
        }
      });

      $('#new-answer').typeahead({
        hint: true,
        highlight: true,
        autoselect: true,
        minLength: 2
      },
      {
        name: 'typeahead-answers',
        source: answer_suggestions,
        display: 'text',
        templates: {
            notFound: '<div>Not Found</div>',
            pending: '<div>Loading...</div>',
            suggestion:  function(data) {
                return `<div>${data.text}</div>`
            },
        },
        limit: 10
      });

你可以看到我在bloodhound中添加了一个自定义的transform。我还在typeahead中添加了一个自定义模板，但这不是必需的。
我希望这对某人有帮助。没有足够的文档或例子，海事组织。
数据记录是您的朋友。

赞(0）回复(0）举报 2023-04-21

我来回答

mongoose typeahead.js中的`display`选项不起作用

1条答案

相关问题

热门标签

最新问答