我在这个小提琴上有类似的代码设置,但自动完成在打字时不会过滤结果。
jQuery(document).ready(function($) {
var autocompleteTerms = JSON.parse( posts );
$('#post-search').autocomplete({
minLength: 2,
source: function (request, response) {
response($.map(autocompleteTerms, function (value, key) {
return {
label: value.post_title,
value: value.ID
}
}));
},
focus: function(event, ui) {
$('#post-search').val(ui.item.post_title);
return false;
},
change: function (event, ui) {
if (!ui.item) {
$("#post-search").val('');
$('#post-search-result').val('');
}
},
select: function(event, ui) {
$('#post-search').val(ui.item.label);
$('#post-search-result').val(ui.item.value);
return false;
}
});
});
这是 wordpress 插件的一部分,发布变量的数据使用
wp_localize_script('post-title-autocomplete', 'posts', [json_encode($results)]);
我是否需要在我的代码中加入有关 jQuery 自动完成中的过滤器响应的答案?
看着你的小提琴,我分叉了它并做了一个工作示例。
http://jsfiddle.net/Twisty/j3jLwwfm/5/
您使用的方式是$.map()
,您只是返回具有特定格式的所有数据。这些都不会被过滤或调整以匹配用户输入的内容。response()
将获取整个数据集并在每次击键时将其返回给用户。您可以调整您的函数以匹配和过滤结果。
要解决此问题,您必须迭代每个可能的值,并拥有一个算法来挑选您想要显示为结果的项目。正如我评论的那样,我会$.each()
像这样使用:
source: function(request, response) {
var r = [];
var q = request.term.toLowerCase();
$.each(data, function(k, v) {
if (v.first_name.toLowerCase().indexOf(q) != -1) {
r.push({
label: v.first_name + " " + v.last_name,
value: v.ID
});
}
});
response(r);
}
r
是结果数组。q
是用户查询。为了使其忽略大小写,我将查询和数据值都转换为小写。使用.indexOf()
我可以检查查询字符串是否是数据值的一部分。-1
如果未找到查询,则返回值将是0 或更高,具体取决于找到它的索引位置。
如果查询是"wi"
,则结果将为 0,并且该值将传递给r
。如果查询是"ill"
,这将以相同的方式完成。=== 0
如果您想确保"wil"
命中名称,但"il"
不会命中结果,您可以将其调整为。
希望这可以帮助。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句