Comma separated multiple inputs in one field using autocomplete

Question

My requirement is exactly as shown by this jQuery plugin:

But the only problem is I want to do it in Alloy-UI 2.5 in Liferay 6.2. I am able to have single input with the following script:

<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>

with alloy-ui 1.7 we used to have 2 more attributes delimChar: ',', & typeAhead: true, for multiple input fields. Are there any equivalents to these?

It would be a great help if somebody can modify the above script to have multiple inputs or some ideas in the correct direction.

Thanks!

Answer 1

In Alloy 2.X delimChar: ',' is changed with queryDelimiter : ',' and following attributes have been removed:

1. typeAhead
2. schema
3. schemaType

Using it as follows will work:

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')
                });
            }
        }
    });                  
});