jQuery用户界面自动完成JS上的keydown错误 [英] jquery ui autocomplete js error on keydown

问题描述

我已经包含了jQuery UI的automcomplete插件安装到结构如下：

i've included the jquery ui automcomplete plugin into the following structure:

<li class="search">
                            <input type="text" class="searchfield" name="searchfield" value="Search for Products" />
                        </li>

我对这个输入字段的javascript如下：

my javascript for this input field looks like:

<script type="text/javascript"> 

function addSearchFieldFunctionality() {

var availableTags = [
                    "ActionScript",
                    "AppleScript",
                    "Asp",
                    "BASIC",
                    "C",
                    "C++",
                    "Clojure",
                    "COBOL",
                    "ColdFusion",
                    "Erlang",
                    "Fortran",
                    "Groovy",
                    "Haskell",
                    "Java",
                    "JavaScript",
                    "Lisp",
                    "Perl",
                    "PHP",
                    "Python",
                    "Ruby",
                    "Scala",
                    "Scheme"
                ];  
$('.searchfield').each(function () {
    $(this).autocomplete({
            source: availableTags,
            minLength: 1


        }).data("autocomplete")._renderItem = function(ul, item) {
            //console.log(item);
            var a = $('<a>', {
                href: item.value,
                text:  item.label,
                "class" : "mySearchClass" 

            });
            var b = $('<a>', {
                href: item.value,
                text: "Add", style: "float:right"});


            var $li = $('<li></li>', {style:"width:100%"});
              return $li.add(a).appendTo(ul);
        };
});
}
</script> 

我加载上的文件准备好该功能。出于某种原因，如果一开始输入例如一个项目的前三个字母，我得到一个resultlist。我只要一推就关键字的keydown按钮，我得到以下错误在Chrome（最新版本）控制台：

I'm loading that function on document ready. for some reason, if a start typing e.g. the first three letters of a item, i get a resultlist. as soon as i push the keydown push button on the keyword, i get the following error in the chrome (latest version) console:

Uncaught TypeError: Cannot read property 'top' of null
a.widget.activate                                        jquery-ui.min.js:12
a.widget.move                                            jquery-ui.min.js:12
a.widget.next                                            jquery-ui.min.js:12
a.widget._move                                           jquery-ui.min.js:12
a.widget._create.element.addClass.attr.attr.bind.bind.d  jquery-ui.min.js:12
f.event.dispatch                                         jquery-1.7.1.min.js:3
f.event.add.h.handle.i

我使用jQuery UI jQuery的1.7.1版本，版本1.8.12

i'm using version 1.7.1 of jQuery and Version 1.8.12 of jquery UI

在jQuery用户界面自动完成的演示页该keydown效果很好。

On the demo page of jquery ui autocomplete the keydown works well.

任何想法与我的星座回事？

Any ideas what's going wrong with my constellation?

它不会有所作为使用远程或本地数据。

It doesn't make a difference to use remote or local data.

最好的问候，
拉莫

Best regards, Ramo

推荐答案

我真的可以让你的code工作。于是，我就重写了它更simplier方式。问题是渲染功能，只接受字符串，而不是HTML元素。所以我添加了一个侦听器，以使生成后的列表（在发射的keydown（）事件）。

I really can make your code working. So I tried to rewrote it in a more simplier way. The problem is render functions only accept strings, not html element. So I add a listener to render the list after its generation (fired on keydown() event).

我的想法是你在做了错误的方式。

My thought is you are doing it the wrong way.

• 为什么加入这些项目的另一个类？他们已经之一，使他们能够风格。


• 为什么将它们变成一个节点？只是他们增加一个点击（）事件

你能解释一下你的功能目标是什么？

Could you explain your functional goal ?

// Your list of links
var redirectLinks = {'Ruby': '1234.com', 'Asp': '1235.com'};
function redirect(url) {
  // TODO implement window.location=url or whatever you like
  if(redirectLinks[url] != undefined) {
    alert('redirecting to '+url+' => '+redirectLinks[url]);
  }
}

$('.searchfield').each(function () {
  $(this).autocomplete(availableTags, { 
    minLength: 1,
    change: function(event, ui) {
      console.log('this change event doesnt seem to be fired');        
    },
    select: function(event, ui) {
      console.log('this select event doesnt seem to be fired');        
    }
  });
  // After the list construction
  $(this).keyup(function(e){      
    if (e.which == 13) { // typing enter validates the input => autocompletechange
      console.log('validating input '+$(this).val());    
      redirect($(this).val());
    }  
    var $list = $('.ac_results:first ul').find('li');
    $list.click(function() { // adding an event on suggestion => autocompleteselect
      console.log('clicking on suggestion '+$(this).text());    
      redirect($(this).text());
    });
  }); 


});

这篇关于jQuery用户界面自动完成JS上的keydown错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！