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

时间:2014-06-04 07:53:19

标签: javascript autocomplete liferay liferay-6 alloy-ui

我的要求完全如此jQuery plugin所示:

jQuery auto-complete

但唯一的问题是我想在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我们曾经有两个属性delimChar: ',',&amp; typeAhead: true,表示多个输入字段。这些都有等价物吗?

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

谢谢!

1 个答案:

答案 0 :(得分:4)

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

  1. 预输入
  2. 模式
  3. 的SchemaType
  4. 按如下方式使用它将起作用:

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