我刚刚注意到,使用键盘选择时,我的自动完成表单无法正常工作。
目标是拥有自由的文本搜索表单,但是当用户输入内容时,他们会获得与数据库中匹配的文档的自动完成列表。自动完成列表为每个项目添加标签,值(URL)和描述。如果用户看到了他们想要的文档,则可以单击它直接打开它。如果看不到,则可以继续输入搜索字符串,然后按Enter键进入搜索结果页面。
除了使用键盘选择自动完成的项目并按Enter之外,其他所有功能均可用。我希望它随后跟随该项的URL(就像单击鼠标一样),但是它只是将标签提交到搜索结果页面。
我希望这是Select事件的默认行为,但是我无法弄清楚是什么原因导致了这种情况。有什么想法吗?
$( function() {
$( ".searchform" ).autocomplete({
minLength: 3,
source: ".../form_autocomplete.cfc?method=getPages",
classes: {"ui-autocomplete": "SpankyDee"},
select: function( event, ui ) {
$( ".searchform" ).val( ui.item.label );
if(ui.item){
$(event.target).val(ui.item.label);
}
//submit the form
$(event.target.form).submit();
return false;
},
open: function(){
$('.ui-autocomplete').css('width', 'calc(50% + 5px)');
}
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
ul.addClass('searchAutoComp');//Add custom class to differentiate between forms
var $li = $('<li>'),
$span = $('<span>');
$span.attr({
class: 'searchCat'
});
$li.attr('data-value', item.label);
$li.append('<a>');
$li.find('a').attr('href', item.value);
$li.find('a').append(item.label);
$li.find('a').append($span);
$li.find('span').append(item.desc);
return $li.appendTo(ul);
};
} );