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

Question

我的要求正是如此jQuery plugin所示:

但唯一的问题是我想在 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')
                });
            }
        }
    });                  
});