Blogs

Comma separated multiple Autocomplete in one field

Sushil Patidar

June 04, 2014

Less Than a Minute Read

As there are lot more improvements in the Alloy UI 2.X . Some attributes have been removed and some are replaced for auto complete. So to implement the comma separeted multiple autocomplete in one field in Alloy UI 1.5 there was attribute delimChar: ',' that have been replaced with queryDelimiter : ','

In Liferay 6.2 this functionality can be achieved by using the following AUI script.

<aui:input name="states" type="textarea" ></aui:input>
 
           <aui:script use="autocomplete-list,aui-base,autocomplete-filters,autocomplete-highlighters">
          
              var states = [
          
                      {"name":"California"},
          
                      {"name":"Colorado"},
          
                      {"name":"Connecticut"},
          
                      {"name":"Colorado"}
          
                      ]; 
          
              new A.AutoCompleteList(
          
                  {
          
                   allowBrowserAutocomplete: 'false',
          
                   activateFirstItem: 'true',
          
                   inputNode: '#<portlet:namespace/>states',
          
                   resultTextLocator: 'name',
          
                   resultHighlighter:'phraseMatch',
          
                   resultFilters: ['startsWith'],  
          
                   minQueryLength: 2,  
          
                   maxResults: 10,  
          
                   queryDelimiter : ',',  
          
                   render: 'true',
          
                   source:states
          
              });  
          
           </aui:script>

2 Comments

Please sign in to comment.

Hi Sushil,

I was looking for this in one of the current projects and you exactly gave the solutions. Thank you so much.

Ahamed Hasan
Author, Liferay Cookbook
http://mpowerglobal.com/download-cookbook

Please sign in to reply.