O'Reilly logo

Liferay 6.2 User Interface Development by Jonas X. Yuan, Xinsheng Chen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Learning other Alloy UI features

In the sample Anise portlet, there is also code that shows other Alloy UI features. These features are commonly used in web applications.

Implementing the autocomplete feature

People are most familiar with this feature on a search engine site. Now, in Alloy UI, its code is simple as shown in the following snippet:

<div id="autoComplete"></div>
...
<aui:script use="aui-autocomplete">
  var states = [
    ['AL', 'Alabama', 'The Heart of Dixie'],
    ...
    ['WY', 'Wyoming', 'Like No Place on Earth']
  ];
   window.AC = new A.AutoComplete(
      {
         dataSource: states,
         schema: {
            resultFields: ['key', 'name', 'description']
         },
         matchKey: 'name',
         delimChar: ',',
         typeAhead: true,
         contentBox: '#myAutoComplete'
      }
   );
   AC.render();
</aui:script>

The

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required