Question

将大量数据分配给jQuery select2下拉菜单时出现问题。我有一个Ajax控制器调用，该调用返回客户数据（ID和名称）并将其分配给Ajax成功调用内的select2下拉框。问题是我有大约77,000个客户记录，并且由于select2处理得不好，并且浏览器在几秒钟后挂起。

作为一个解决方案，我在select2中遇到了分页，并尝试了很多示例，但是在我的方案中没有一个起作用。我一次要加载所有客户数据，因为我不想经常查询搜索客户记录。

我有一个javascript函数，可从控制器（Ruby）获取数据，并使用select2将其分配给选择下拉列表。

function updateCustomerList(teamId, customerSelectInput) {
    if(teamId !== undefined) {
        $.ajax({
            dataType: "json",
            url: "/team/customers",
            data: {team_id: teamId},
            success: function(data) {
                $(customerSelectInput).select2({
                    createSearchChoice: createSearchChoiceFunction,
                    placeholder: "Search for customer"],
                    data: data
                });
            },
            error: function(jqXHR, textStatus, errorThrown) {
                displayError(jqXHR.responseText)
            }
        });
    }

    var createSearchChoiceFunction = function(term, data) {
        if ( $(data).filter( function() {
                return this.text.localeCompare(term)===0;
            }).length===0) {
            return {id:term, text:term};
        }
    }
}

FYI团队控制器方法“客户”只是对客户集合进行查询，并通过团队ID获取所有客户，并将结果作为json对象返回。

任何帮助/指导将不胜感激！

Answer 1

我有大约77,000个客户记录，因此select2处理得不好，几秒钟后浏览器挂起。

那是因为所有数据都正在加载到内存中，所以您会看到所有RAM都消失了。在DOM中，创建了许多<options>，而chrome会很高兴吃掉您的所有内存。

我认为您可以使用Algolia API和Autocomplete.js获得更好的结果，一个JavaScript库，可在您的搜索框中添加快速且功能齐全的自动完成菜单，并在“键入时”显示结果。

https://github.com/algolia/autocomplete.js

使用分页将Ajax控制器调用的结果分配给select2

1 个答案: