javascript - JQuery Autocomplete Widget - Up & Down Arrow Keys not working -
i new jquery , going through snippet of code of larger application (which have outsourced). snippet jquery widget autocomplete results.
on html page, have search box. when user enters keystrokes, search performed (for places , events) on our database , results shown in un-ordered list. results show fine. however, hoping scroll through results using down , arrow key not seem work.
opening developer tools in chrome, when press down key following error reported
uncaught typeerror: cannot read property 'value' of undefined jquery-ui.min.js:8
the relevant widget code follows
$.widget("custom.catcomplete", $.ui.autocomplete, { _rendermenu: function(ul, items) { ul.addclass('search-box'); var = this; var = 0; var j = 0; var index = 0; $.each(items, function(index, item) { if (item.space && == 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 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 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> notification keyword.</article>") .appendto(ul); }
}
from limited understanding of jquery widgets : each result received appending ul , calling renderitemdata in turn calls renderitem
i unable understand 'value' code referring to.
Comments
Post a Comment