Question

基本自动完成绑定到ajax调用，结果显示正常。当我向下滚动时，我需要获取更多数据并将其附加到已经显示的自动完成列表中，而不关闭现有的打开下拉列表。

尝试将源选项添加到新列表中，但新条目不会显示。

$( "auto" ).autocomplete("option","source",autocompletesource); Here autocompletesource contains old results and new results.
尝试了_renderItem。同样的问题，它们不会出现在下拉列表中。

$。each（results，function（index，item）{ $（“＃auto”）。autocomplete（）。data（“ui-autocomplete”）._ renderItem = function（ul，item）{ return $（“

如下所示。结果显示在列表中，但在选择或甚至鼠标悬停时，获取未定义item.value的MenuFocus错误

$（“.ui-autocomplete”）。append（“

我不确定选项3是否是正确的方法。也许自动完成组件中已有一些东西，我没有使用它。如果我必须使用选项3，如何删除MenuFocus错误。

Answer 1

现在，我可以设法在自动完成内滚动添加更多行的唯一方法如下：

$( ".ui-autocomplete" ).scroll(function() {
var $this = $(this);
var isbottom=isScrollbarBottom($(this));
if(isbottom) {
  //make an ajax call   
  $.ajax({
    //get your incremental data and iterate thru the result and add them
    $.each(results, function (index, item) {
/*   this works for display but 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 with the selected value
}

向jquery自动完成添加更多行

1 个答案: