我需要从我的数据库中动态获取数据(如用户类型)。我试过看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
在本地存在。但我需要从我的服务器端脚本中获取数据。我怎么能这样做?
答案 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演示了远程信号源的基本用法。