ajax - adding more rows to jquery autocomplete -
the basic autocomplete bound ajax call , results shown fine. when scroll down, need more data , append displayed autocomplete list, without closing existing open dropdown.
tried adding source option new list, new entries not show up.
$( "auto" ).autocomplete("option","source",autocompletesource); here autocompletesource contains old results , new results.tried _renderitem. same problem, not show in dropdown.
$.each(results, function (index, item) { $("#auto").autocomplete().data("ui-autocomplete")._renderitem = function( ul, item ) { return $( "
" ).data("item.autocomplete", item) .append( "" + item.value + "" + item.label ) .appendto( ul ); }; }); appended below. results show in list, on selection or mousing over, menufocus error undefined item.value
$( ".ui-autocomplete" ).append( "
" ).data("item.autocomplete", item) .append( ""+item.label+""); });
i not sure if option 3 correct way of doing it. maybe there in autocomplete component, not using. , if have go option 3, how remove menufocus error.
for now, way manage , add more rows on scrolling within autocomplete follows:
$( ".ui-autocomplete" ).scroll(function() { var $this = $(this); var isbottom=isscrollbarbottom($(this)); if(isbottom) { //make ajax call $.ajax({ //get incremental data , iterate thru result , add them $.each(results, function (index, item) { /* works display no selection ; selection added manually via function select_dynamic_row; */ $( ".ui-autocomplete" ).append( '<li class="ui-menu-item" id="ui-id-'+item.value+' tabindex="-1" onclick=\'select_dynamic_row("'+item.value+'","'+encodeuricomponent(item.label)+'")\'>'+item.label+'</li>' ); }); } }); function isscrollbarbottom(container) { var height = container.outerheight(); var scrollheight = container[0].scrollheight; var scrolltop = container.scrolltop(); if (scrolltop >= scrollheight - height) { return true; } return false; }; function select_dynamic_row(label,value){ //do whatever selected value }
Comments
Post a Comment