javascript - 使用自动完成以逗号分隔一个字段中的多个输入

Question

我的要求与这个jQuery 插件完全一样：

但唯一的问题是我想在 Liferay 6.2 的 Alloy-UI 2.5 中执行此操作。我可以使用以下脚本进行单一输入：

<aui:script>
    AUI().use('autocomplete-list','aui-base','aui-io-request','autocomplete-filters','autocomplete-highlighters',function (A) {
        A.io.request('<%= serveResourceTestURL %>',{
            dataType: 'json',
            method: 'GET',
            on: {
                success: function() {
                    new A.AutoCompleteList(
                    {
                        allowBrowserAutocomplete: 'false',
                        activateFirstItem: 'true',
                        inputNode: '#<portlet:namespace/>testNode',
                        resultTextLocator: 'name',
                        resultHighlighter:'phraseMatch',
                        resultFilters: ['startsWith'],
                        minQueryLength: 2,
                        maxResults: 10,
                        render: 'true',
                        source:this.get('responseData'),
                    });
                }
            }
        });
    });
</aui:script>

alloy-ui 1.7我们曾经有 2 个以上的属性&delimChar: ',',用于typeAhead: true,多个输入字段。这些有什么等价物吗？

如果有人可以修改上述脚本以获得多个输入或一些正确方向的想法，那将是一个很大的帮助。

谢谢！

Answer 1

在 Alloy 2.X delimChar: ',' 中更改为 queryDelimiter : ',' 并删除了以下属性：

1. 提前输入
2. 图式
3. 模式类型

如下使用它会起作用：

AUI().use('autocomplete-list','aui-base','aui-io-request','autocomplete-filters','autocomplete-highlighters',function (A) {
    A.io.request('<%= serveResourceTestURL %>',{
        dataType: 'json',
        method: 'GET',
        on: {
            success: function() {
                new A.AutoCompleteList(
                {
                    allowBrowserAutocomplete: 'false',
                    activateFirstItem: 'true',
                    inputNode: '#<portlet:namespace/>to',
                    resultTextLocator: 'name',
                    resultHighlighter:'phraseMatch',
                    resultFilters: ['startsWith'],                          
                    minQueryLength: 2,                  
                    maxResults: 10, 
                    queryDelimiter : ',',               
                    render: 'true',
                    source:this.get('responseData')
                });
            }
        }
    });                  
});