我在Bloodhound中使用typeahead.js来搜索使用本地源的用户:
let users = [
{name: 'John Doe (john.doe@email.org)', value: '3421'},
{name: 'Jane Doe (test@email.org)', value: '8100'},
];
匹配显示键为name
:
$('input').typeahead(
{
minLength: 1,
highlight: true
},
{
name: 'users',
displayKey: 'name',
source: new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: users
})
}
);
当按用户名搜索时,它确实匹配,例如"John"或"Jane"。但如果你通过电子邮件搜索,例如"john.doe"、"test"或"email.org",则不会。
但是,如果去掉括号,例如'John Doe john.doe@email.org'
,则"john.doe"确实匹配。但不是"email.org"。
其他特殊字符,如<
,例如'John Doe <john.doe@email.org>'
,也有同样的问题。
为什么特殊字符会破坏数据匹配,我能做些什么来帮助它?
这是一支工作笔。
我可以有一个额外的属性:
let users = [
{name: 'John Doe (john.doe@email.org)', value: '3421', match: 'John Doe john.doe@email.org'},
{name: 'Jane Doe (test@email.org)', value: '8100', match: 'Jane Doe test@email.org'},
];
通过新密钥匹配:
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('match')
或者我可以有一个新的属性email
,并有以下数据标记器:
datumTokenizer: u => Bloodhound.tokenizers.whitespace([u.name + ' ' + u.email])
但这远非理想。但是我怎样才能使name
密钥匹配呢?
您似乎需要使用自己的标记化器,如下所示。
const customTokenizer = (user) => {
const tokens = user.name.split(/[s()]+/);
console.info('Tokenizer', user, '=>', tokens);
return tokens;
};
let users = [{
name: 'John Doe (john.doe@email.org)',
value: '3421'
// , email: 'john.doe@email.org'
},
{
name: 'Jane Doe (test@email.org)',
value: '8100'
//, email: 'test@email.org'
},
];
$('input').typeahead({
minLength: 1,
highlight: true
}, {
name: 'users',
displayKey: 'name',
source: new Bloodhound({
// datumTokenizer: u => Bloodhound.tokenizers.whitespace([u.name + ' ' + u.email]),
datumTokenizer: customTokenizer,
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: users
})
});
.tt-menu {
background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<div id="search">
<input type="text" placeholder="Search user">
</div>
对datumTokenizer
和queryTokenizer
都使用nonword
标记器。