Question

我已将jquery ui automcomplete插件包含在以下结构中：

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

此输入字段的javascript类似于：

<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>

我正在准备好文档上加载该功能。出于某种原因，如果开始打字，例如一个项目的前三个字母，我得到一个结果列表。只要我按下关键字上的keydown按钮，我就会在chrome（最新版本）控制台中收到以下错误：

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版本1.7.1和jquery UI版本1.8.12

在jquery ui自动完成的演示页面上，keydown运行良好。

任何想法我的星座出了什么问题？

使用远程或本地数据没有任何区别。

祝你好运，拉莫

Answer 1

我真的可以让你的代码正常工作。所以我试着以更简单的方式重写它。问题是渲染函数只接受字符串，而不是html元素。所以我添加了一个监听器来生成列表（在keydown（）事件上触发）。

我的想法是你做错了。

为什么在这些项目上添加另一个课程？他们已经有一个，所以他们可以设计风格。
为什么要将它们转换为节点？只需在它们上添加一个click（）事件

你能解释一下你的功能目标吗？

// 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());
    });
  }); 


});

kequown上的jquery ui autocomplete js错误

1 个答案: