预输入搜索中出现重复记录
Duplicate records coming in typeahead search
我正在使用 typeahaead.js 实现预输入搜索,但是在预输入搜索框中输入时,建议下拉列表中的每条记录都会出现 twice.I 检查了数据源(即 POST api 调用),它只有唯一的 records.where 我做错了吗?任何帮助或相关链接。
即使控制也不会复制检测器。
类似问题discussed here,但没有解决方案。
<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;
}
});
result.initialize();
$('input').typeahead(null, {
name: 'result',
displayKey: 'id',
source: result.ttAdapter(),
templates: {
empty: ['<div>', 'no results found', '</div>'],
suggestion: function (data) {
return '<p>' + data.basicinfo.object_name + '</p>';
}
},
});
我找到了解决方案,我在过滤器中做错了。我的解决方案是
var result = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: 'abc.com&qterm=#%QUERY',
wildcard: '%QUERY',
rateLimitWait: 300 ,
transport: function (opts, onSuccess, onError) {
var url = opts.url.split("#")[0];
var query = opts.url.split("#")[1];
$.ajax({
url: url + query,
type: "POST",
success: onSuccess,
error: onError,
});
},
filter: function (data) {
if (data) {
var result = data.data.results.data;
return $.map(result, function (object) {
return { name: object.basicinfo.object_name, id: object.basicinfo.id };
});
} else {
return {};
}
}
},
dupDetector: function (remoteMatch, localMatch) {
return remoteMatch.id === localMatch.id;
}
});
function onSuccess(data) {
}
result.initialize();
$('input').typeahead(null, {
hint: true,
name: 'result',
displayKey: 'name',
source: result.ttAdapter(),
templates: {
empty: ['<div class="empty-message">', 'no results found', '</div>'].join('\n'),
suggestion: function (data) {
return '<p class="type-suggestion">' + data.name + '</p> \n\r';
}
},
})
我正在使用 typeahaead.js 实现预输入搜索,但是在预输入搜索框中输入时,建议下拉列表中的每条记录都会出现 twice.I 检查了数据源(即 POST api 调用),它只有唯一的 records.where 我做错了吗?任何帮助或相关链接。
即使控制也不会复制检测器。
类似问题discussed here,但没有解决方案。
<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;
}
});
result.initialize();
$('input').typeahead(null, {
name: 'result',
displayKey: 'id',
source: result.ttAdapter(),
templates: {
empty: ['<div>', 'no results found', '</div>'],
suggestion: function (data) {
return '<p>' + data.basicinfo.object_name + '</p>';
}
},
});
我找到了解决方案,我在过滤器中做错了。我的解决方案是
var result = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: 'abc.com&qterm=#%QUERY',
wildcard: '%QUERY',
rateLimitWait: 300 ,
transport: function (opts, onSuccess, onError) {
var url = opts.url.split("#")[0];
var query = opts.url.split("#")[1];
$.ajax({
url: url + query,
type: "POST",
success: onSuccess,
error: onError,
});
},
filter: function (data) {
if (data) {
var result = data.data.results.data;
return $.map(result, function (object) {
return { name: object.basicinfo.object_name, id: object.basicinfo.id };
});
} else {
return {};
}
}
},
dupDetector: function (remoteMatch, localMatch) {
return remoteMatch.id === localMatch.id;
}
});
function onSuccess(data) {
}
result.initialize();
$('input').typeahead(null, {
hint: true,
name: 'result',
displayKey: 'name',
source: result.ttAdapter(),
templates: {
empty: ['<div class="empty-message">', 'no results found', '</div>'].join('\n'),
suggestion: function (data) {
return '<p class="type-suggestion">' + data.name + '</p> \n\r';
}
},
})