预输入搜索中出现重复记录
Posted
技术标签:
【中文标题】预输入搜索中出现重复记录【英文标题】:Duplicate records coming in typeahead search 【发布时间】:2016-05-21 03:15:49 【问题描述】:我正在使用 typeahaead.js 实现 typeahead 搜索,但作为 typeahead 搜索框中的类型,在建议下拉列表中每个记录都会出现两次。我检查了数据源(即 POST api 调用),它只有唯一的记录。我在哪里错了吗?任何帮助或相关链接。
即使控制也不会复制检测器。
类似问题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>';
,
);
【问题讨论】:
你能创建一个 jsbin 或 jsfiddle 来重现错误吗?如果不是这样,你可以重构你的代码以删除任何非必要的东西(模板、提示、绑定等)并看看发生了什么? Console.log 进入你的过滤函数看看它在做什么? 在过滤函数中放一个console.log - filter: function (data) console.log(data); if (data) return $.map(data, function (object) console.log(object); console.log(data.data); console.log(data.data.results); console.log(data. data.results.data); 返回 data.data.results.data; ); 您拥有的过滤器功能对我来说没有意义。您应该在 map 函数中处理对象,但您将其忽略为“数据”。 @F11 您应该发布您的解决方案并将其标记为答案。 如果您得到了答案,那么您应该将其标记为已回答。 【参考方案1】:我找到了解决方案,我在过滤器中做错了。我的解决方案是
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';
,
)
【讨论】:
以上是关于预输入搜索中出现重复记录的主要内容,如果未能解决你的问题,请参考以下文章