Sorting 对预先输入的建议进行排序,精确输入在顶部
我使用Twitter typeahead.js 0.10.5作为建议引擎。它工作得很好,除了一个例外,我不能按照我想要的方式对建议列表进行排序 例如:Sorting 对预先输入的建议进行排序,精确输入在顶部,sorting,typeahead.js,bloodhound,Sorting,Typeahead.js,Bloodhound,我使用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"},
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>')
}
var data=[{“id”:1,“value”:“无需”},
{“id”:2,“value”:“没有必要”},
{“id”:3,“value”:“需要”},
{“id”:4,“value”:“我所需要的一切”},
{“id”:5,“value”:“need”},
{“id”:6,“value”:“needs”},
{“id”:7,“value”:“他所需要的一切”},
{“id”:8,“value”:“他需要”},
{“id”:9,“value”:“他们需要”},
{“id”:10,“value”:“您需要”}]
var建议=新猎犬({
datumTokenizer:Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer:猎犬,标记,空白,
当地:数据,
限额:20
});
建议初始化();
$('.typeahead')。typeahead({
提示:没错,
自动选择:正确,
推荐理由:没错,
最小长度:1
},
{
名称:'建议',
displayKey:'值',
来源:suggestion.ttAdapter(),
模板:{
空的:[
'',
“此地图中没有建议”,
''
].join('\n'),
建议:handlebar.compile(“{{value}}”)
}
当我键入“需要”时,我确实会按数组中的位置排序建议,但我希望按输入排序,这意味着顺序应该是“需要”、“需要”、“我需要的全部”……当键入“他”时,应该是“他需要”、“他需要的全部”、“我需要的全部”等
我知道《猎犬》有一个排序器选项,但我不知道在这种特殊情况下如何使用它。您希望沿着这些线进行一些操作。这将把精确匹配移到顶部。您将希望继续修改排序器代码以处理字符串大小写、空格以及如何处理非完美但相近的匹配。这应该开始吧
var suggestion = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: data,
limit: 20,
sorter:function(a, b) {
//get input text
var InputString= $(Selector).val();
//move exact matches to top
if(InputString==a.value){ return -1;}
if(InputString==b.value){return 1;}
//close match without case matching
if(InputString.toLowerCase() ==a.value.toLowerCase()){ return -1;}
if(InputString.toLowerCase()==b.value.toLowerCase()){return 1;}
if( (InputString!=a.value) && (InputString!=b.value)){
if (a.value < b.value) {
return -1;
}
else if (a.value > b.value) {
return 1;
}
else return 0;
}
},
});
var建议=新猎犬({
datumTokenizer:Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer:猎犬,标记,空白,
当地:数据,
限额:20,
分拣机:功能(a,b){
//获取输入文本
var InputString=$(选择器).val();
//将精确匹配移动到顶部
如果(InputString==a.value){return-1;}
如果(InputString==b.value){return 1;}
//无大小写匹配的封闭匹配
if(InputString.toLowerCase()==a.value.toLowerCase()){return-1;}
if(InputString.toLowerCase()==b.value.toLowerCase()){return 1;}
if((InputString!=a.value)&&(InputString!=b.value)){
如果(a值b值){
返回1;
}
否则返回0;
}
},
});
要根据与输入的接近程度对所有匹配项进行排序,您可以选择a
和b
。我刚刚使用实现了这一点,它工作正常,性能良好
sorter: function(a, b) {
var input_string = $(selector).val();
return levenshtein.get(a.key, input_string) - levenshtein.get(b.key, input_string);
}
有人能解释传递给函数(a,b)的两个值吗?我运行了一个控制台日志,“a”似乎是JSON对象,但我无法确定“b”是什么。a和b之间的唯一区别是,b将是数组中的下一个对象(紧跟在a之后)一个优雅的解决方案,比公认的答案快很多。
sorter
是typeahead中的一个选项吗?我应该在哪里添加您的代码片段?