jQuery自动完成功能无法按Enter键选择

时间:2018-08-15 09:20:57

标签: jquery jquery-ui-autocomplete

我刚刚注意到,使用键盘选择时,我的自动完成表单无法正常工作。

目标是拥有自由的文本搜索表单,但是当用户输入内容时,他们会获得与数据库中匹配的文档的自动完成列表。自动完成列表为每个项目添加标签,值(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);
              };  
          } );

0 个答案:

没有答案