向 jquery 自动完成添加更多行

Posted 2023-05-08

【中文标题】向 jquery 自动完成添加更多行

【英文标题】：adding more rows to jquery autocomplete

【发布时间】：2018-01-29 07:20:21

【问题描述】：

基本的自动完成功能绑定到 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) 返回 $("

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

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

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

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

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

【参考方案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