Question

我正在尝试让Typeahead从我的JSON源添加自动填充，但是没有添加任何结果。

一些背景信息：我已经让Sinatra服务于一个JSON页面，它接受了一个查询参数，这里是代码：

get '/search' do
    content_type :json
    Movie.search(params[:q], {
      fields: ["title^5"],
      limit: 10,
      load: false
    }).map(&:title).to_json
end

它正在发挥作用;这是一个示例结果。

/search?q=toy%20story返回：

["Toy Story"]

我的HTML输入如下所示：

<input id="search-box" type="text" value="" placeholder="Search for Movie Title" class="form-control" name="search">

和我的JS：

$(function() {
  $('#search-box').typeahead({
    highlight: true,
    limit: 10
  },
  {
    display: 'movie',
    source: function(query, syncResults, asyncResults) {
      $.get('/search?q=' + encodeURIComponent(query), function(data) {
        asyncResults(data);
        console.log(data);
      });
    }
  }
})

结果显示在我输入的console.log中，并且添加了Typeahead HTML实体，但其中没有任何内容，并且它们被隐藏。

有人可以帮忙吗？我整天都被困在这一天。

Answer 1

我坚信display: 'movie'导致你的问题。如果您返回一个字符串数组，即["Toy Story"]，那么您希望显示数组项的value：

display: 'value'

否则，如果您处理JSON项目数组，例如

[{ "title" : "2001: A Space Odyssey" } , { ... } ]

然后display（或displayKey）应该引用您想要在下拉列表中显示的键/值对：

display: 'title'

Typeahead 0.11.1不添加JSON的结果

1 个答案: