请参阅下面的示例.
JSFiddle:http://jsfiddle.net/R7UvH/2/
如何让typeahead.js(0.10.1)在多个属性值中搜索匹配项？理想的情况下,整个内data(data.title,data.desc并在所有data.category[i].name)
datumTokenizer: function(data) {
// **search in other property values; e.g. data.title & data.desc etc..**
return Bloodhound.tokenizers.whitespace(data.title);
},
整个例子:
var data = [{
title: "some title here",
desc: "some option here",
category: [{
name: "category 1",
}, {
name: "categoy 2",
}]
},
{
title: "some title here",
desc: "some option here",
category: [{
name: "category 1",
}, {
name: "categoy 2",
}]
}];
var …所以我试图使用猎犬搜索引擎构建一些东西,我注意到它有这两个标记器,基准和查询.
文档中给出的初始化代码示例如下所示:
var engine = new Bloodhound({
local: ['dog', 'pig', 'moose'],
queryTokenizer: Bloodhound.tokenizers.whitespace,
datumTokenizer: Bloodhound.tokenizers.whitespace
});
这两个Tokenizer做什么？
编辑
Bloodhound文档将这两个定义如下:
datumTokenizer - 具有签名(datum)的函数,用于将数据转换为字符串标记数组.需要.
queryTokenizer - 具有签名(查询)的函数,用于将查询转换为字符串标记数组.需要.
它仍然没有解释基准和查询之间的区别.
UPDATE
基于@BenSmith(/sf/users/14236001/BenSmith)的正确答案,我能够找到我的问题并发现我没有正确浏览我的JSON层次结构.这是工作代码:
// instantiate the bloodhound suggestion engine
var engine = new Bloodhound({
datumTokenizer: function (datum) {
return Bloodhound.tokenizers.whitespace(datum.title);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: "SampleData.json",
filter: function (data) {
//console.log("data", data.response.songs)
return $.map(data.response.songs, function (song) {
return {
title: song.title,
artistName: song.artist_name
};
});
}
}
});
// initialize the bloodhound suggestion engine
engine.initialize();
// instantiate the typeahead UI
$('#prefetch .typeahead').typeahead(
{
hint: true,
highlight: true,
minLength: 1
},
{
name: 'engine',
displayKey: 'title',
source: engine.ttAdapter(),
templates: …我想使用预取,我不能让它工作!这是我的代码:
function initAutocompletion() {
$("input[data-autocomplete-prefetch-url]").each(function () {
var $this = $(this);
var urlPrefetch = $this.data("autocomplete-prefetch-url");
var prefetch;
pref = {
url: urlPrefetch,
filter: filter
};
var bloodHound = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
limit: 10,
prefetch: pref
});
bloodHound.initialize();
$this
.typeahead('destroy')
.typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
displayKey: 'value',
source: bloodHound.ttAdapter()
});
});
}
function filter(list) {
return $.map(list, function (v) { return { value: v.toString() }; });
}
它不起作用.
如果我使用远程而不是预取它工作!
var bloodHound = new Bloodhound({ …我正在使用typeahaead.js实现typeahead搜索,但是在typeahead搜索框中输入类型,在建议下拉列表中每个记录都会出现两次.我检查了数据源(即POST api调用),它只有唯一的记录.我在哪里做错了？帮助或相关链接.
即使控制也不会重复检测器.
这里讨论了类似的问题,但没有解决方案.
<div id="bloodhound">
<input class="typeahead" type="text" placeholder=" Search">
</div>
<script>
var result = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: 'https://api1.com/idocs/api',
wildcard: '%QUERY',
rateLimitWait: 300 ,
transport: function (opts, onSuccess, onError) {
var url = opts.url;
$.ajax({
url: url,
type: "POST",
success: onSuccess,
error: onError,
});
},
filter: function (data) {
if (data) {
return $.map(data, function (object) {
return data.data.results.data;
});
}
}
},
dupDetector: function (remoteMatch, localMatch) {
return remoteMatch.id === localMatch.id; …我使用Twitter typeahead.js 0.10.5作为建议引擎.它工作得很好,但有一个例外,我不能按照我想要的方式对建议列表进行排序.
举个例子:
var data =[{"id":1,"value":"no need"},
{"id":2,"value":"there is no need"},
{"id":3,"value":"in the need of"},
{"id":4,"value":"all I need"},
{"id":5,"value":"need"},
{"id":6,"value":"needs"},
{"id":7,"value":"all he needs"},
{"id":8,"value":"he needs"},
{"id":9,"value":"they need"},
{"id":10,"value":"you need"}]
var suggestion = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: data,
limit: 20
});
suggestion.initialize();
$('.typeahead').typeahead({
hint: true,
autoselect: true,
highlight: true,
minLength: 1
},
{
name: 'suggestion',
displayKey: 'value',
source: suggestion.ttAdapter(),
templates: {
empty: [
'<div class="empty-message">',
'no suggestion in this map',
'</div>'
].join('\n'),
suggestion: Handlebars.compile('<p><span class="suggestion-text">{{value}}</span></p>')
}
当我输入"need"时,我确实按照数组中的位置获得了建议,但是我想通过输入来命令它,这意味着顺序应该是"需要","需要","我需要的所有"......当输入"他"应该是"他需要","他需要的一切","我需要的一切"等. …
我的前端有一个TypeAhead/Bloodhound实现,它从Play/Scala服务器获取JSON数据.Typeahead-version是0.11.1.实施如下:
HTML:
<div id="typeahead" class="col-md-8">
<input class="typeahead form-control" type="text" placeholder="Select the user">
</div>
JavaScript的:
var engine = new Bloodhound({
datumTokenizer: function (datum) {
var fullName = fullName(datum);
return Bloodhound.tokenizers.whitespace(fullName);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
identify: function(obj) { return obj.id; },
remote: {
url: routes.controllers.Users.index("").url,
cache: false,
replace: function (url, query) {
if (!isEmpty(query)) {
url += encodeURIComponent(query);
}
return url;
},
filter: function (data) {
console.log(data);
return $.map(data, function (user) {
return {
id: user.id,
fullName: viewModel.fullName(user)
};
});
}
}
}); …我下面这个例子为typeahead.js使用Bloodhound的T,但我得到一个JavaScript错误.我错过了什么？
HTML :( .net razor view)
@Scripts.Render(Links.Scripts.typeahead_bundle_js)
@Styles.Render(Links.Content.typeahead_min_css)
<input id="myInput" type="text" class="form-control" />
JS:
$(function () {
var data = ["abce", "abcd", 'def', 'abcdef'];
var bh = new Bloodhound({
local: data,
queryTokenizer: Bloodhound.tokenizers.whitespace,
datumTokenizer: Bloodhound.tokenizers.whitespace
});
//bh.initialize(); //this wasn't in the example, adding it had no effect
$('#myInput').typeahead({
highlight:true
},
{
name: "testData",
source: bh
});
});
给出错误typeahead.bundle.js:
this.source不是一个函数
我正在使用Typeahead/Bloodhound从数据库的内容生成列表.我希望屏幕阅读器在突出显示时能够阅读血腥建议.我在元素中添加了一些咏叹调角色,试图从屏幕阅读器中读取内容.但是,突出显示时,屏幕阅读器是静音的.如果我将焦点添加到元素,那么blodhound模态窗口将关闭,这将无法正常工作.
var myTypeahead = $('.supersearch').typeahead({
highlight: true,
autoselect: true
},
{
name: 'search-content',
displayKey: 'title',
source: content.ttAdapter(),
templates:{
header: '<h3 class="typeaheadTitle">Filtering Content...</h3>',
empty: [
'<div class="noResults">',
'No Results',
'</div>'
].join('\n'),
suggestion: Handlebars.compile('<div class="searchListItem"><a href="{{link}}" class="searchLink" aria-label="{{title}}">{{title}}</a></div>')
}
});
myTypeahead.on('typeahead:cursorchanged', function($e, datum){
$(this).html(datum["value"]);
var focused = $( document.activeElement )
var submenuHighlight = focused.parent().find('.tt-cursor .searchListItem a');
console.log(submenuHighlight.text());
});
// Add aria dialog role
$('.tt-dataset-search-content').attr({
'role': 'dialog',
'aria-live': 'assertive',
'aria-relevant':'additions'
});
这会将aria标签角色添加到输出列表和容器,但尝试通知读者此列表动态更改.我也在听cursorchanged,所以我可以隔离我需要的元素(console.log验证这个),但我不知道如何告诉读者用tt-cursor类读取当前项.
<div class="tt-dataset-search-content" role="dialog" aria-live="rude" aria-relevant="additions">
<h3 class="typeaheadTitle">Filtering Content...</h3>
<span …所有,我试图根据一些工作样本申请Twitter typeahead并Bloodhound进入我的项目,但我无法理解下面的代码.
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('songs'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
原始代码如下所示.
var songlist = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('songs'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
limit: 10,
remote: '/api/demo/GetSongs?searchTterm=%QUERY'
});
该公文只是说:
datumTokenizer - 具有签名(datum)的函数,用于将数据转换为字符串标记数组.需要.
queryTokenizer - 具有签名(查询)的函数,用于将查询转换为字符串标记数组.需要.
这是什么意思 ？有人可以帮忙告诉我更多关于它的信息,以便我更好地理解吗？
bloodhound ×10
typeahead.js ×8
jquery ×6
javascript ×4
typeahead ×3
json ×2
nested ×1
prefetch ×1
sorting ×1
twitter ×1