从远程脚本中获取数据

时间:2016-04-05 08:59:14

标签: javascript typeahead.js twitter-typeahead

我需要从我的数据库中动态获取数据(如用户类型)。我试过看typeahead 示例,但我不明白如何实现远程实现。

<div id="remote">
  <input class="typeahead" type="text" placeholder="Oscar winners for Best Picture">
</div>

$('#the-basics .typeahead').typeahead({
      hint: true,
      highlight: true,
      minLength: 1
    },
    {
      name: 'states',
      source: substringMatcher(states)
    });

这要求数组states在本地存在。但我需要从我的服务器端脚本中获取数据。我怎么能这样做?

1 个答案:

答案 0 :(得分:0)

要使用远程数据源,建议您也使用Bloodhound引擎。

您需要定义血腥实例,设置远程选项:

var taSource = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('Value'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  identify: function(obj) {
    return obj.Value;
  },
  remote: todos
});

在这个例子中,我创建了一个options哈希,它包含我的远程源的配置:

var urlRoot = '//jsonplaceholder.typicode.com';
var todos = {
  url: urlRoot + '/todos',
  prepare: function(query, settings) {
    settings.url += '?q=' + query;
    return settings;
  },
  filter: function(data) {
    return $.map(data, function(object) {
        return {
          Id: object.id,
          Value: object.title
        };
    });
  }
};

在其中,我定义了我的远程源的url,如何处理查询,以及如何返回数据以供typeahead使用。

一旦我定义了我的猎犬实例,我就会初始化它:

taSource.initialize(true);

然后我定义我的预先输入对象以使用bloodhound实例:

$('#search-input').typeahead({
  hint: true,
  highlight: true,
  minLength: 3
}, {
  name: 'myMatches',
  source: taSource,
  display: 'Value'
});

以下a link to a jsFiddle演示了远程信号源的基本用法。