带有远程数组的 Twitter typeahead.js答案

【问题标题】：Twitter typeahead.js with remote array带有远程数组的 Twitter typeahead.js
【发布时间】：2014-06-11 14:37:38
【问题描述】：

我想使用 twtter 的 typeahead 来显示一些输入建议。建议将来自服务器，因此我需要使用远程表单： http://twitter.github.io/typeahead.js/examples/

但是远程示例都返回 json。由于我将拥有大量数据并且我想将其存储在 Redis 中，我想我会将数据存储在一个值数组中而不是 json 中。为了节省内存。

我还没有参与 Redis 部分，只是尝试返回一个数组。但我只是得到一堆未定义的选项可供选择。

任何迹象都将不胜感激。

我在 Rails 上。假设我会从服务器返回 render :text => ["abc", "sdf", "erw", gfg"]，我如何提前输入以显示基于该响应的建议？

这是我想采用数组而不是 json 的示例：

var bestPictures = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: '../data/films/post_1960.json',
  remote: '../data/films/queries/%QUERY.json'
});

bestPictures.initialize();

$('#remote .typeahead').typeahead(null, {
  name: 'best-pictures',
  displayKey: 'value',
  source: bestPictures.ttAdapter()
});

谢谢。

【问题讨论】：

标签： javascript ruby-on-rails typeahead.js

【解决方案1】：

我自己来回答

<script type="text/javascript">

$(function() {
      var xx = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace("user"),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      remote: {
        url: '/home/cp?c=%QUERY',
         filter: function(list) {
            console.log(list)
            return $.map(list, function(name) { return { user: name}; });
        }
      } 
    });

    xx.initialize();

    $('#remote .typeahead').typeahead(null, {
      name: 'xx',
      displayKey: 'user',
      source: xx.ttAdapter()
    }); 


})


</script>



<div id="remote" style="text-align:center; margin-top: 200px;">
    <input class="typeahead" type="text">
</div>

因此，从控制器返回 render json: %w[foo bar] 将显示可用选项。

【讨论】：