Question

我是Jquery的新手，正在浏览一个更大的应用程序代码片段（我们已将其外包）。此代码段是一个用于自动填充结果的jquery小部件。

在HTML页面上，我们有一个搜索框。当用户输入一些击键时，在我们的数据库上执行搜索（对于地点和事件），结果显示在无序列表中。结果很好。但是，我希望使用向下和向上箭头键滚动查看结果，这似乎不起作用。

在Chrome中打开开发者工具，当我按下向下键时，会报告以下错误

Uncaught TypeError: Cannot read property 'value' of undefined  jquery-ui.min.js:8

相关的Widget代码如下

$.widget("custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function(ul, items) {
        ul.addClass('search-box');
        var that = this;
        var i = 0;
        var j = 0;
        var index = 0;
        $.each(items, function(index, item) {
            if (item.Space && i == 0) {
                ul.append('<h4><i class="fa fa-car fa-fw"></i> Parking Space</h4>');
                i++;
            }
            if (item.Event && j == 0) {
                if (i > 0) {
                    ul.append('<a href="#" class="see-result text-right">See All Result</a>');
                }
                ul.append('<h4><i class="fa fa-calendar"></i> Venues</h4>');
                j++
            } 
            that._renderItemData(ul, item);
        });
        if (j == 0 && items.value == 'error') {
            ul.append('<a href="#" class="see-result text-right">See All Result</a>');
        }
    }
});

$(function() {
// made on 01-07-2015
$("#search_new").catcomplete({
    delay: 0,
    //minLength: 2,
    zIndex: 9999,
    source: base_url + "searches/index.json",
    messages: {
        noResults: '',
        results: function() {}
    },
    select: function(event, ui) {
        window.location = (ui.item.url);
    }
}).off('blur').on('blur', function() {
    if(document.hasFocus()) {
        $('ul.ui-autocomplete').show();
    }
}); 
});

$.ui.autocomplete.prototype._renderItem = function(ul, item) {
if (item.Space) {
    var space_body = '';
    var address2 = (item.Space.address2 != null) ? item.Space.address2 : '';
    space_body = space_body + "<article><strong><a class='search-name-link' href="+base_url+"spaces/spaceDetail/"+encodeURIComponent(Base64.encode(item.Space.id))+">"+item.Space.name+"</a> - "+item.City.name+"</strong></br>"+item.Space.flat_apartment_number+", "+item.Space.address1+", "+address2+" "+item.City.name+"</article>";
    console.log("In _renderItem"); 
    return $(ul).append(space_body)
    .appendTo(ul);
}

if (item.Event) {
    var event_body = '';
    event_body = event_body + "<article><strong><a class='search-name-link' href="+base_url+"events/eventDetail/"+encodeURIComponent(Base64.encode(item.Event.id))+">"+item.Event.event_name+"</a></strong></br>"+item.EventAddress.address+" "+item.City.name+"</article>";

    return $(ul).append(event_body)

    .appendTo(ul);
}

if (!item.Space && !item.Event) {
    return $(ul).append("<article class='no-search'>No records found. <b><a href='javascript:void(0)' class='search-not-found'>Click here</a></b> to get notification for your keyword.</article>")

    .appendTo(ul);
}

}

从我对JQuery Widgets的有限理解：对于收到的每个结果，我们将附加到 ul 并调用renderItemData，而renderItemData又调用renderItem

我无法理解哪个＆＃39;价值＆＃39;是指代的代码。

JQuery Autocomplete Widget - Up＆amp;向下箭头键不起作用

0 个答案: