Question

我有一个自动完成控件，当第一组自动完成的＆＃34;建议＆＃34;从我的自定义数据源呈现。

我有一种机制可以检测滚动位于最底部的情况，在这种情况下，会加载其他数据并将其附加到自动完成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调用它）。

*已更新：*

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

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

source：function（request，response）{

Answer 1

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

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

...而不是直接在自动完成的UL中添加条目。通过这种方式，jquery ui库将知道如何正确处理新值。我在这里制作了一个JSFiddle来说明它是如何工作的：https://jsfiddle.net/n3p3epkc/ 如果您输入＆＃39; j＆＃39;您将看到初始列表中的条目。当您输入＆＃39; ja＆＃39;该列表将使用其他值进行更新。

Answer 2

我为我的问题找到了一个很好的，优雅的解决方案。基本上我设置了一个名为＆＃34的变量;追加＆＃34;滚动事件调用搜索时为true。

返回＆＃34时的搜索结果;附加＆＃34;结果，我只是简单地将项目列表连接到一个单独的列表。

source：function现在被修改为执行其通常的新搜索或通过响应回调呈现完整的建议项列表。

简而言之，source：function根据＆＃34;追加＆＃34;的状态做两件不同的事情。变量是真还是假。

希望这有助于其他人。

jquery autocomplete - 可点击的附加项

2 个答案: