Auto Complete Text Box

Step 1 :

                   Create a portlet named as ‘Auto Fields’.

Step 2:

Create a folder structure named as ‘/html/autoCompletePortlet’ under docroot of the created portlet.

Step 3 :

Create a jsp named as ‘init.jsp’ under  ‘/html/ autoCompletePortlet’ folder structure and place the following code in it.

<%@page import="com.liferay.portlet.asset.service.AssetEntryLocalServiceUtil"%>

<%@page import="com.liferay.portlet.asset.service.AssetTagLocalServiceUtil"%>

<%@page import="com.liferay.portlet.asset.model.AssetEntry"%>

<%@page import="com.liferay.portal.model.RoleConstants"%>

<%@page import="com.liferay.portal.service.RoleLocalServiceUtil"%>

<%@page import="com.liferay.portal.model.Role"%>

<%@page import="com.liferay.portal.model.Team"%>

<%@page import="java.util.Iterator"%>

<%@page import="com.liferay.portal.service.TeamLocalServiceUtil"%>

<%@page import="com.liferay.portal.service.ResourcePermissionLocalServiceUtil"%>

<%@page import="com.liferay.portal.model.ResourcePermission"%>

<%@page import="com.liferay.portal.service.GroupLocalServiceUtil"%>

<%@ page import="javax.portlet.PortletPreferences" %>

<%@ taglib uri="http://java.sun.com/portlet" prefix="portlet" %>

<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>

<%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet" %>

<%@ taglib uri="http://liferay.com/tld/security" prefix="liferay-security" %>

<%@ taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme" %>

<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>

<%@ taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme" %>

<%@ taglib uri="http://liferay.com/tld/util" prefix="liferay-util" %>

<%@ page import="com.liferay.portal.kernel.util.WebKeys" %>

<%@ page import="com.liferay.portal.kernel.util.ParamUtil" %>

<%@ page import="com.liferay.portal.kernel.language.LanguageUtil" %>

<%@ page import="com.liferay.portal.kernel.bean.BeanParamUtil" %>

<%@ page import="java.util.List" %>

<%@ page import="java.util.Locale" %>

<%@ page import="java.util.Map" %>

<%@ page import="java.util.MissingResourceException" %>

<%@ page import="java.util.Properties" %>

<%@ page import="java.util.ResourceBundle" %>

<%@ page import="java.util.Set" %>

<%@ page import="java.util.Stack" %>

<%@ page import="java.util.TimeZone" %>

<%@ page import="java.util.TreeMap" %>

<%@ page import="java.util.TreeSet" %>

<%@ page import="javax.portlet.MimeResponse" %>

<%@ page import="javax.portlet.PortletConfig" %>

<%@ page import="javax.portlet.PortletContext" %>

<%@ page import="javax.portlet.PortletException" %>

<%@ page import="javax.portlet.PortletMode" %>

<%@ page import="javax.portlet.PortletPreferences" %>

<%@ page import="javax.portlet.PortletRequest" %>

<%@ page import="javax.portlet.PortletResponse" %>

<%@ page import="javax.portlet.PortletSession" %>

<%@ page import="javax.portlet.PortletURL" %>

<%@ page import="javax.portlet.RenderRequest" %>

<%@ page import="javax.portlet.RenderResponse" %>

<%@ page import="javax.portlet.ActionRequest"%>

<%@ page import="javax.portlet.ResourceURL" %>

<%@ page import="javax.portlet.UnavailableException" %>

<%@ page import="javax.portlet.ValidatorException" %>

<%@ page import="javax.portlet.WindowState" %>

<%@ page import="com.liferay.portlet.PortletPreferencesFactoryUtil"%>

<%@ page import="java.util.ArrayList" %>

<%@ page import="com.liferay.portal.kernel.util.UnicodeFormatter" %>

<%@ page import="com.liferay.portal.kernel.util.UnicodeProperties" %>

<%@ page import="com.liferay.portal.kernel.util.Validator" %>

<%@ page isELIgnored="false" %>

<script src="/html/js/liferay/service.js" type="text/javascript"></script>

<script src="/html/js/jquery/jquery.js" type="text/javascript"></script>

<script src="/html/js/jquery/json.js" type="text/javascript"></script>

<script src="/html/js/editor/ckeditor/ckeditor.js" type="text/javascript"></script>

<portlet:defineObjects />

<liferay-theme:defineObjects/>

Step 4 :

Open the liferay-plugin-package.properties file and import  place the following code in it.

portal-dependency-jars=\

    jstl-api.jar,\

    jstl-impl.jar

portal-dependency-tlds=\

    c.tld,\

    liferay-aui.tld,\

    liferay-faces.tld,\

    liferay-portlet-ext.tld,\

    liferay-portlet.tld,\

    liferay-security.tld,\

    liferay-theme.tld,\

    liferay-ui.tld,\

    liferay-util.tld

Step 5:

Create a jsp named as ‘view.jsp’ under  ‘/html/ autoFieldsPortlet’ folder structure and place the following code in it.

<%@page import="javax.portlet.ActionRequest"%>

<%@ include file="/html/tabsPortlet/init.jsp" %>

<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>

<portlet:resourceURL id="getJson" var="resouceURL"></portlet:resourceURL>

<portlet:defineObjects />

<div id="myAutoComplete"></div>

<aui:script >

AUI().use('aui-autocomplete', 'aui-editable', 'aui-toolbar', 'aui-panel', 'aui-sortable','aui-calendar-base', function(A) {

 /******************** Example3*********************************/

 var states = [

          ['AL', 'Alabama', 'The Heart of Dixie'],

          ['AK', 'Alaska', 'The Land of the Midnight Sun'],

          ['AZ', 'Arizona', 'The Grand Canyon State'],

          ['AR', 'Arkansas', 'The Natural State'],

          ['CA', 'California', 'The Golden State'],

          ['CO', 'Colorado', 'The Mountain State'],

          ['CT', 'Connecticut', 'The Constitution State'],

          ['DE', 'Delaware', 'The First State'],

          ['DC', 'District of Columbia', "The Nation's Capital"],

          ['FL', 'Florida', 'The Sunshine State'],

          ['GA', 'Georgia', 'The Peach State'],

          ['HI', 'Hawaii', 'The Aloha State'],

          ['ID', 'Idaho', 'Famous Potatoes'],

          ['IL', 'Illinois', 'The Prairie State'],

          ['IN', 'Indiana', 'The Hospitality State'],

          ['IA', 'Iowa', 'The Corn State'],

          ['KS', 'Kansas', 'The Sunflower State'],

    ['KY', 'Kentucky', 'The Bluegrass State'],

          ['LA', 'Louisiana', 'The Bayou State'],

          ['ME', 'Maine', 'The Pine Tree State'],

          ['MD', 'Maryland', 'Chesapeake State'],

          ['MA', 'Massachusetts', 'The Spirit of America'],

          ['MI', 'Michigan', 'Great Lakes State'],

          ['MN', 'Minnesota', 'North Star State'],

          ['MS', 'Mississippi', 'Magnolia State'],

          ['MO', 'Missouri', 'Show Me State'],

          ['MT', 'Montana', 'Big Sky Country'],

          ['NE', 'Nebraska', 'Beef State'],

          ['NV', 'Nevada', 'Silver State'],

          ['NH', 'New Hampshire', 'Granite State'],

          ['NJ', 'New Jersey', 'Garden State'],

          ['NM', 'New Mexico', 'Land of Enchantment'],

          ['NY', 'New York', 'Empire State'],

          ['NC', 'North Carolina', 'First in Freedom'],

          ['ND', 'North Dakota', 'Peace Garden State'],

          ['OH', 'Ohio', 'The Heart of it All'],

          ['OK', 'Oklahoma', 'Oklahoma is OK'],

          ['OR', 'Oregon', 'Pacific Wonderland'],

          ['PA', 'Pennsylvania', 'Keystone State'],

          ['RI', 'Rhode Island', 'Ocean State'],

          ['SC', 'South Carolina', 'Nothing Could be Finer'],

          ['SD', 'South Dakota', 'Great Faces, Great Places'],

          ['TN', 'Tennessee', 'Volunteer State'],

          ['TX', 'Texas', 'Lone Star State'],

          ['UT', 'Utah', 'Salt Lake State'],

          ['VT', 'Vermont', 'Green Mountain State'],

          ['VA', 'Virginia', 'Mother of States'],

          ['WA', 'Washington', 'Green Tree State'],

          ['WV', 'West Virginia', 'Mountain State'],

          ['WI', 'Wisconsin', "America's Dairyland"],

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

Step 6 :

In portlet.xml change the view.jsp path to the following code .

<init-param>

                  <name>view-jsp</name>

                  <value>/html/ autoFieldsPortlet /view.jsp</value>

            </init-param> 

Step 7 :

Deploy the portlet and  see the portlet in the website page.