jquery autocomplete - 可点击的附加项目答案

【问题标题】：jquery autocomplete - Clickable appended itemsjquery autocomplete - 可点击的附加项目
【发布时间】：2016-09-21 03:54:03
【问题描述】：

我有一个自动完成控件，当第一组自动完成的“建议”从我的自定义数据源呈现时，它就会起作用。

我有一种机制可以检测滚动何时位于最底部，在这种情况下会加载附加数据并将其附加到自动完成 UL 元素。

// This loads more data when scroll bar reaches the bottom of autocomplete suggestion list.
$(".autocomplete ul", $MyForm).bind('scroll', function () {
                var $this = $(this);
                if ($this.scrollTop() > maxScrollTopLength) {
                    maxScrollTopLength = $this.scrollTop();
                    if (!currentCallInProgress && maxScrollTopLength > $this[0].scrollHeight - $this.height() - settings.bottomScrollLength) {
                        skipToken += 1;
                        // search for suggestions based on scroll movement.
                        loadMoreItems(pageSearch.$query.val());
                    }
                }
            });

问题是这样的：

附加的项目是不可点击的，尽管它们出现在列表中。我做错了什么？

请注意，在处理附加数据项加载的方法中，没有要调用的响应对象（它是为源：函数调用的）。

* 更新：*

我的自动完成控件实现源码：像这样：

source: function (request, callback) {
   loadData(request.term, callback);   
   // loadData basically makes an $.ajax call to retrieve data, and calls -
   // callback(results)
}

来源：函数（请求、响应）{

【问题讨论】：

标签： jquery autocomplete jquery-ui-autocomplete

【解决方案1】：

为了刷新自动完成的值列表，使其包含新值，并且它们功能齐全，您可以使用这样的调用...

$( "#myAutocompleteFieldId" ).autocomplete({
       source: initialValues.concat(newValues)
    });       
});

...而不是直接在自动完成的 UL 中添加条目。这样，jquery ui 库将知道如何正确处理新值。我在这里制作了一个 JSFiddle 来说明它是如何工作的：https://jsfiddle.net/n3p3epkc/ 如果您输入“j”，您将看到初始列表中的条目。当您输入“ja”时，列表将更新为其他值。

【讨论】：

感谢您的回答。我很快就会对此进行测试，如果它有效，我会给予你信任！
您能否更新您的答案以包括我的场景（我正在根据滚动位置提取其他数据）？
你能设置一个 JSFiddle 来说明你的代码现在是如何工作的，我可以在那里调试它吗？有一些部件丢失了，我不确定所有部件是如何安装到位的。如果是 ajax 调用，您需要在从服务器加载它们之后更新回调中的源。
这是一个典型的自动完成场景，其中用户输入的术语被发送到 Web 服务，该服务返回建议结果的列表。初始建议列表有效，因为它是通过响应回调通过自动完成控制呈现的。但是，控件不会呈现其他建议，因为滚动检测方法正在调用/处理 Web 服务。

【解决方案2】：

我为我的问题找到了一个不错的、优雅的解决方案。基本上，当滚动事件调用搜索时，我将一个名为“附加”的变量设置为 true。

当返回“附加”结果的搜索结果时，我只是将项目列表连接到单独的列表。

source: 函数现在已修改为执行其通常的新搜索或通过响应回调呈现建议项目的完整列表。

简而言之，source: 函数根据“附加”变量的状态是真还是假做了两件不同的事情。

希望这对其他人有所帮助。

【讨论】：