向 jquery 自动完成添加更多行

Question

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

1. 尝试将源选项添加到新列表中，但没有显示新条目。

   $( "auto" ).autocomplete("option","source",autocompletesource); Here autocompletesource contains old results and new results.

2. 尝试了 _renderItem。同样的问题，它们没有显示在下拉列表中。

   $.each(results, function (index, item) { $("#auto").autocomplete().data("ui-autocomplete")._renderItem = function(ul, item) { 返回 $("

3. " ).data("item.autocomplete", item) .append("" + item.value + "" + item.label) .appendTo(ul); }; });

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

   $(".ui-autocomplete").append("

" ).data("item.autocomplete", item) .append(""+item.label+""); });

我不确定选项 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
}