Textext 插件 autosuggest 生成的列表应该以搜索到的字符串开头,而不是首先包含
Textext plugin autosuggest generates list should begin with the searched string instead of contains as first
我正在使用 textext 插件进行自动完成、自动建议等。
我有一个 Destination 字段,即每当用户搜索国家或城市时的文本框,它应该填充或建议 matched 城市或国家在下拉菜单中。
例如,如果用户搜索 'Ameri'
当前输出
来自 textext 插件正在检索包含搜索文本的所有字符串 'Americ'
- 北美洲
- 南美洲
- 美利坚合众国
- 美国峡谷
- 美国河
预期输出
想要匹配字符串的列表,它以搜索的文本开头 'Americ' 结果应该在第一位,稍后搜索的文本包含列表。
字符串以
开头
- 美国峡谷
- 美国河
包含列表
- 北美洲
- 南美洲
- 美利坚合众国
$('#textarea').textext({
plugins: 'tags autocomplete filter focus',
minLength: 3,
})
.bind('getSuggestions', function(e, data) {
if (data.query.length) {
var list = [
'United states of America',
'South America',
'India',
'Delhi',
'Pune',
'North America',
'American River ',
'American canyon'
],
textext = $(e.target).textext()[0],
query = (data ? data.query : '') || '';
$(this).trigger(
'setSuggestions', {
result: textext.itemManager().filter(list, query)
}
);
}
});
<textarea id="textarea" class="example" rows="1"></textarea>
我已经通过在 textext 插件上添加部分代码自行解决了这个问题,如果我的方法不正确,请纠正我。
这是它的演示 - http://holidays.coxandkings.com/
$('#textarea')
.textext({
plugins : 'autocomplete filter',
useSuggestionsToFilter : true
})
.bind('getSuggestions', function(e, data)
{
var list = [
'United states of America',
'South America',
'India',
'Delhi',
'Pune',
'North America',
'American River ',
'American canyon'
],
textext = $(e.target).textext()[0],
query = (data ? data.query : '') || ''
;
// Implementing search functionality from the begining of the string, later dispalying the contains list.
var filterItems = textext.itemManager().filter(list, query);
var filteredResultCount = filterItems.length;
var beginingMatches = [];
var containsMatches = [];
for (var i=0; i < filteredResultCount; i++) {
if(filterItems[i].toLowerCase().indexOf(query.toLowerCase()) == 0 ) {
beginingMatches.push(filterItems[i]);
}else{
containsMatches.push(filterItems[i]);
}
}
var finalResult = beginingMatches.concat(containsMatches);
$(this).trigger(
'setSuggestions', { result : finalResult}
);
});
我正在使用 textext 插件进行自动完成、自动建议等。
我有一个 Destination 字段,即每当用户搜索国家或城市时的文本框,它应该填充或建议 matched 城市或国家在下拉菜单中。
例如,如果用户搜索 'Ameri'
当前输出
来自 textext 插件正在检索包含搜索文本的所有字符串 'Americ'
- 北美洲
- 南美洲
- 美利坚合众国
- 美国峡谷
- 美国河
预期输出 想要匹配字符串的列表,它以搜索的文本开头 'Americ' 结果应该在第一位,稍后搜索的文本包含列表。
字符串以
开头- 美国峡谷
- 美国河
包含列表
- 北美洲
- 南美洲
- 美利坚合众国
$('#textarea').textext({
plugins: 'tags autocomplete filter focus',
minLength: 3,
})
.bind('getSuggestions', function(e, data) {
if (data.query.length) {
var list = [
'United states of America',
'South America',
'India',
'Delhi',
'Pune',
'North America',
'American River ',
'American canyon'
],
textext = $(e.target).textext()[0],
query = (data ? data.query : '') || '';
$(this).trigger(
'setSuggestions', {
result: textext.itemManager().filter(list, query)
}
);
}
});
<textarea id="textarea" class="example" rows="1"></textarea>
我已经通过在 textext 插件上添加部分代码自行解决了这个问题,如果我的方法不正确,请纠正我。 这是它的演示 - http://holidays.coxandkings.com/
$('#textarea')
.textext({
plugins : 'autocomplete filter',
useSuggestionsToFilter : true
})
.bind('getSuggestions', function(e, data)
{
var list = [
'United states of America',
'South America',
'India',
'Delhi',
'Pune',
'North America',
'American River ',
'American canyon'
],
textext = $(e.target).textext()[0],
query = (data ? data.query : '') || ''
;
// Implementing search functionality from the begining of the string, later dispalying the contains list.
var filterItems = textext.itemManager().filter(list, query);
var filteredResultCount = filterItems.length;
var beginingMatches = [];
var containsMatches = [];
for (var i=0; i < filteredResultCount; i++) {
if(filterItems[i].toLowerCase().indexOf(query.toLowerCase()) == 0 ) {
beginingMatches.push(filterItems[i]);
}else{
containsMatches.push(filterItems[i]);
}
}
var finalResult = beginingMatches.concat(containsMatches);
$(this).trigger(
'setSuggestions', { result : finalResult}
);
});