Rails 中的动态自动完成，使用 jQuery TokenInput 插件

Posted 2023-05-09

【中文标题】Rails 中的动态自动完成，使用 jQuery TokenInput 插件

【英文标题】：Dynamic Autocompletion in Rails, using the jQuery TokenInput Plugin

【发布时间】：2011-08-20 02:07:05

【问题描述】：

我正在使用出色的 TokenInput 插件 (http://loopj.com/jquery-tokeninput/) 来让 rails 进行一些自动补全，而对于模型中的一组普通数据，它的效果非常好。但我的问题是，在我的情况下，我实际上有 2 个文本框我想使用它，第二个文本框的建议应该取决于第一个文本框的内容。 更具体地说：我需要选择一个足球俱乐部（我可以从数据库中的所有现有俱乐部中自动完成），然后选择参加比赛的球队。所以球队的自动完成应该只使用与已经选择的俱乐部相关联的球队，我完全不知道如何或者即使我可以在 rails 和这个插件中做到这一点（但插件本身不应该真的是一个障碍）。 我想我的主要问题是我缺乏使用 javascript 的经验，尤其是与 rails 结合使用。 有没有人在他/她的申请中做了类似的事情并且可以帮助我？

【参考方案1】：

您的问题可能有许多不同的极端情况。查看 tokenInput 方法“onResult”。

也许您可以从第一个输入字段 (input-1) 获取当前值，并根据 input-1 评估输入 2 的返回 json 并过滤掉您不想要的那些。 您将不得不在 rails 创建的 json 数组中包含过滤所需的 id 元素。

<script type="text/javascript">
        $(document).ready(function() 
            $("#input-1").tokenInput("http://railsapp.com/your/search/action");

            $("#input-2").tokenInput("http://railsapp.com/your/search/action", 
                onResult: function (results) 
                    var input-1 = $("#input-1").val();
                    $.each(results, function (index, value) 
                        // some JS to keep only results which match input-1 values
                    );

                    return results;
                
            );
        );
        </script>

免责声明：这只是一个想法。

希望这会有所帮助。

【讨论】：

我有一个关于 rails/tokeninput 的非常简短的问题，对你来说可能很简单。介意帮忙吗？ ***.com/questions/6819481/…

【参考方案2】：

感谢您的回答。我知道，我需要使用 onResult 回调，但方向错误。所以你的回答实际上帮助我正确地使用了我的方法。我得到了它的 95% 的工作方式，我需要它用一点点代码来丢弃任何不需要的结果：

if (value.club_id != verein1)
                        results.splice(index,1)     
                    

问题是，不幸的是，我不得不发现，onResult 回调仅在新搜索时调用。 TokenInput 插件缓存搜索/结果以减少服务器负载。因此，当我在第二个框中输入第一个字符时，它会触发搜索，调用 onResult 并且我的结果会被正确过滤。所以一切似乎都很好。但是，如果我删除第一个字符并再次输入，插件会使用缓存的结果，并且不会调用 onResult 并且结果显示为未经过滤。这意味着，如果我在第一个框中输入俱乐部，然后在第二个框中搜索团队，则所有内容都会正确过滤。但是，如果我随后决定删除俱乐部并输入另一个俱乐部（例如，因为我选择了错误的俱乐部），那么团队的结果将不再被正确过滤，因为每次搜索字符串出现两次时，插件都会抛出缓存的搜索结果. 顺便说一句：缓存的结果是未经过滤的原始结果，而不是通过我之前过滤的结果数组。

现在我不确定这是否是一个错误，或者它是否打算这样，我努力更改插件的源代码以进行更改也没有任何成功。

【讨论】：

更新：我暂时删除了将结果添加到缓存中。这样它就不会干扰我的回调。让我们看看这是否会对性能产生重大影响。