Alloy UI Auto complete in liferay 6.2

[Shahbaj Maner, módosítva 10 év-val korábban]

Hello, I am doing an Auto completion with ajax using alloy ui in Liferay 6.2 with ajax call but it is not working at all !!!!!.I tried simple auto completion also but that is also not working.Is there any problem with alloy ui in Liferay 6.2?? Show me the way to do it in Liferay 6.2 no matter even if it's without ajax!! Pleas help me out!!
below is my view.jsp

 
<portlet:resourceurl var="ajaxResourceURL" />

<div id="myAutoComplete"> </div>
       
<aui:script use="aui-autocomplete">

var dataSource = new A.DataSource.IO(
    {
        source: '&lt;%=ajaxResourceURL %&gt;'
    }
);

var autoComplete = new A.AutoComplete(
    {
        dataSource: dataSource,
        //delimChar: '',
        contentBox: '#myAutoComplete',
        matchKey: 'name',
        schema: {
            resultListLocator: 'response',
            resultFields: ['name']
        },
        uniqueName:'keyword',
        schemaType:'json',
        typeAhead: true,
        cssClass: 'ac_input'
    });

autoComplete.generateRequest = function(query) {
    return {
        request: '&amp;&lt;%=DisplayTerms.KEYWORDS %&gt;=' + query
    };
}
autoComplete.render();
</aui:script>

And this is my portlet class where i have written Serve resource

@Override
public void serveResource(ResourceRequest resourceRequest,
		ResourceResponse resourceResponse) throws IOException,
		PortletException {
	JSONObject json = JSONFactoryUtil.createJSONObject();
    JSONArray results = JSONFactoryUtil.createJSONArray();
    json.put("response", results);
    
    String cmd = ParamUtil.getString(resourceRequest, Constants.CMD);
    String keyword = ParamUtil.getString(resourceRequest, DisplayTerms.KEYWORDS);
    String searchPattern = keyword.replace("*", "%");
    
            DynamicQuery dynamicQuery = DynamicQueryFactoryUtil.forClass(Profile.class, PortalClassLoaderUtil.getClassLoader()).
                            add(PropertyFactoryUtil.forName("residingArea").like(searchPattern));
            try {
                    @SuppressWarnings("unchecked")
                    List<profile> profiles= ProfileLocalServiceUtil.dynamicQuery(dynamicQuery);
                    for (Profile pro : profiles) {
                            JSONObject listEntry = JSONFactoryUtil.createJSONObject();
                            listEntry.put("name", pro.getResidingArea());                          
                            results.put(listEntry);
                    }
            } catch (Exception e) {
                    
            }
}
</profile>

[Jignesh Vachhani, módosítva 10 év-val korábban]

Hi Shahbaj,

You can see best fit example Here with the sample code.
See more Auto complete functions :
http://www.liferaysolution.com/2011/03/autocomplete-using-jquery.html
http://www.liferaysolution.com/2013/05/ajax-call-using-resource-url-spring-mvc.html
http://www.liferaysolution.com/2012/09/use-of-serveresource-to-populate-json.html
http://www.liferaysolution.com/2011/11/how-to-use-jquery-in-liferay-6.html

I will check your code for AlloyUI auto-complete and will inform you if I found any issue in code.

Meantime hope above links will help you to understand at code level to achieve the auto complete functionality.

[Shahbaj Maner, módosítva 10 év-val korábban]

Hi Jignesh,

Neither of above is working at all on Liferay 6.2. I want auto completion using alloy ui. Please provide some solution!!!!

regards,
Shahbaj

[Vernon Singleton, módosítva 10 év-val korábban]

Shahbaj Maner:

Neither of above is working at all on Liferay 6.2. I want auto completion using alloy ui. Please provide some solution!!!!

Hi Shahbaj,

Did you try the suggestion I made to you in this post?
Or maybe if that does not work, yesterday, I posted another full solution for auto complete in this post?

Autocomplete is working just fine for us on Liferay 6.2.

Hope that helps,
Vernon

[Shahbaj Maner, módosítva 10 év-val korábban]

Hi Vernon,
As you suggested I did the changes in xml file but it is not working. I want it in LIferay portlet as i showed a code in first post. That code is working perfectly in liferay 6.1 but not in 6.2. Please suggest some solution.

Regards,
Shahbaj

[Vernon Singleton, módosítva 10 év-val korábban]

Shahbaj Maner:

I want it in LIferay portlet as i showed a code in first post. That code is working perfectly in liferay 6.1 but not in 6.2. Please suggest some solution.

Since this is the Liferay Faces forum, and I just gave this solution in another post ... I will show you how to do Auto completion with ajax in Liferay 6.2 using Java Server Faces.

First, start with the primefaces3-portlet demo, building it from source as instructed here. For Liferay 6.2 you will need to checkout the 3.2.x branch instead of the 3.1 branch (which is for Liferay 6.1).

You will find the primefaces-portlet war in the demos/bridge/primefaces3-portlet/target directory after it builds.

Then, I add the following line to the applicant.xhtml file at the top of the form after the opening form tag:
<p:autoComplete completeMethod="#{autoCompleteBean.complete}" value="#{autoCompleteBean.txt1}"/>

I put that line after the p:messages tag ...

Next, add the following class in the com.liferay.faces.demos.bean package:

mport java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped
public class AutoCompleteBean implements Serializable {
    private String txt1;

    public AutoCompleteBean() {
        System.out.println("AutoCompleteBean() ...");
    }

    public List<string> complete(String query) {
        System.out.println("complete: query = " + query);
        List<string> results = new ArrayList<string>();

        for (int i = 0; i &lt; 10; i++) {
            results.add(query + i);
        }
        return results;
    }

    public String getTxt1() {
        return txt1;
    }

    public void setTxt1(String txt1) {
        this.txt1 = txt1;
    }
}</string></string></string>

Rebuild your war using "mvn clean package", and deploy the war to Liferay 6.2. You may also want to check that your WEB-INF/liferay-portlet.xml descriptor contains this line:
<requires-namespaced-parameters>false</requires-namespaced-parameters>

But if you are building from source as instructed then that line should be there. This line is new and necessary for Liferay 6.2.

Hope that helps,
Vernon

[Kyle Joseph Stiemann, módosítva 10 év-val korábban]

Hi Shahbaj,
From your post, it seems that you are using the AlloyUI 1.5 AutoComplete. However, Liferay 6.2 uses AlloyUI 2.0, and this post from one of the AlloyUI guys suggests that it isn't possible to use an older version of Alloy within the portal.

To utilize AutoComplete functionality in Liferay Portal 6.2, you will need to use the new AlloyUI AutoCompleteList (or it's alias AutoComplete) and modify your javascript to work with AutoCompleteList's API.

Here is a simple working example that I created from the old AlloyUI 1.5 AutoComplete example:

<input id="myInputNode">
<aui:script>
	AUI().use(
		'autocomplete-list',
		function (A) {
			var continents = ['America', 'Europe', 'Asia', 'Africa', 'Oceania', 'Antarctica'];
			
			new A.AutoCompleteList(
			{
				allowBrowserAutocomplete: 'true',
				activateFirstItem: 'true',
				inputNode: '#myInputNode',
				render: 'true',
				source: continents
			})
		}
	);
</aui:script>

I tested this by modifying the applicant.xhtml file (I just removed everything but the aui:layout and pasted my example code in there) of the Liferay Faces 3.2 JSF2-portlet (if you want to do the same thing, you will need to build the Liferay Faces 3.2.x branch from source).

However, you should be able to simply paste this into your .xhtml view file, and then modify it according to your needs.

EDIT: Oops, I didn't realize you were using .jsp. I tested it using the Liferay Faces 3.2 JSF2-JSP-portlet (essentially using the same methodology and code as I did with the .xhtml version) and it worked fine.

EDIT 2: I didn't realize you were not using JSF. In that case, most of my answer does not apply, but it is still important that you use AutoComplete from AlloyUI 2.0 in Liferay 6.2 rather than Autocomplete from 1.5.

- Kyle

[M J, módosítva 10 év-val korábban]

@Shahbaj Maner

Did you get the AUI Autocomplete working in 6.2? If so, can you provide the solution? I am having same problem.

Thanks.

[Shahbaj Maner, módosítva 10 év-val korábban]

@ M J

Not yet..Still searching the solution.. ! Please post if u get one!!

Thanks

[Ajay Saharan, módosítva 10 év-val korábban]

<input id="myInputNode"/>
<aui:script>
AUI().use(
'autocomplete-list',
function (A) {
var continents = ['America', 'Europe', 'Asia', 'Africa', 'Oceania', 'Antarctica'];

new A.AutoCompleteList(
{
allowBrowserAutocomplete: 'true',
activateFirstItem: 'true',
inputNode: '#myInputNode',
render: 'true',
source: continents
})
}
);
</aui:script>

Above example is working with Liferay 6.2 I wrote above example in simple jsp in Spring based portlet. Now I am trying to run above with AJAX request. Once I'll done I'll post it.

[M J, módosítva 10 év-val korábban]

@ Ajay

Any luck with ajax autocomplete in Liferay 6.2?

[M J, módosítva 10 év-val korábban]

Any updates?

[Jonathan Mak, módosítva 10 év-val korábban]

Hi MJ,

I think your best bet might be to look at YUI's autocomplete module (http://yuilibrary.com/yui/docs/autocomplete/) where you can use an XHR/JSONP or a YQL query to get AJAX results.

I hope this helps! Thanks!

[M J, módosítva 10 év-val korábban]

@ Jonathan

I am talking about using ajax with AlloyUI Autocomplete in Liferay 6.2. Ajax with AUI Autocomplete in Liferay 6.1 works fine.

[Iliyan Peychev, módosítva 10 év-val korábban]

What Jonathan says is correct. Many of the components in Alloy have been created because this time YUI didn't offer an alternative. I don't know if you are aware of this, but if not, here it is: you can use whatever component from YUI directly in Liferay. The AutoComplete in YUI3 is brilliant, I would recommend it too. Here is the documentation:
http://yuilibrary.com/yui/docs/autocomplete/

In order to use it, do the following:
<aui:script use="autocomplete,autocomplete-highlighters">
// Here just use Inside A. instead Y. as in AutoComplete documentation on yuilibrary.com
</aui:script>

[Joaquin Cabal, módosítva 10 év-val korábban]

Hi you are right , I tested the case with the YUI library and this example is working:

<aui:script use="autocomplete-list">

var ds = new A.DataSource.IO({
source: '<portlet:resourceURL/>'
});
var autoComplete = new A.AutoCompleteList(
{
allowBrowserAutocomplete: 'false',
activateFirstItem: 'true',
inputNode: '#<portlet:namespace/>name',
render: 'true',
source: ds,
requestTemplate: '&<portlet:namespace/>keywords={query}'
});

</aui:script>

Here you can do an ajax call in Liferay 6.2

[M J, módosítva 10 év-val korábban]

I tried the above in Liferay 6.2. It's not even going to the portlet serveResource method! What am doing different?

JSP

<portlet:resourceurl var="getPlaces">
  <portlet:param name="<%=Constants.CMD%>" value="get_places" />
</portlet:resourceurl>

<input id="<portlet:namespace />name">

<aui:script use="autocomplete-list">

  var ds = new A.DataSource.IO({
    source: '&lt;%=getPlaces%&gt;'
  });

  var autoComplete = new A.AutoCompleteList({
    allowBrowserAutocomplete: 'false',
    activateFirstItem: 'true',
    inputNode: '#<portlet:namespace />name',
    render: 'true',
    source: ds,
    requestTemplate: '&amp;<portlet:namespace />keywords={query}'
  });

</aui:script>

Portlet serveResource Method:

@Override
public void serveResource(ResourceRequest resourceRequest, ResourceResponse resourceResponse) throws IOException, PortletException {
  String cmd = ParamUtil.getString(resourceRequest, Constants.CMD);

  System.out.println("Constants.CMD: " + cmd);

  if (cmd.equals("get_places")) {
    getPlaceJson(resourceRequest, resourceResponse);
  }
}

private void getPlaceJson(ResourceRequest resourceRequest, ResourceResponse resourceResponse) throws IOException, PortletException {

  JSONObject jsonRows = JSONFactoryUtil.createJSONObject();
  JSONArray jsonResults = JSONFactoryUtil.createJSONArray();
  jsonRows.put("response", jsonResults);

  try {
    String keyword = ParamUtil.getString(resourceRequest, "keywords");
    String searchPattern = keyword.replace("*", "%");

    System.out.println("Keywords: " + searchPattern);

    JSONObject jsonCells = JSONFactoryUtil.createJSONObject();
    jsonCells.put("key", "1");
    jsonCells.put("name", "New York, USA");
    jsonResults.put(jsonCells);

  } catch (Exception e) {
  }

  writeJSON(resourceRequest, resourceResponse, jsonRows);
}

[Joaquin Cabal, módosítva 10 év-val korábban]

Hi MJ,
You need to out the string URL as:
source: '<%=getPlaces.toString()%>'

Maybe that could be the problem

[M J, módosítva 10 év-val korábban]

Joaquin Cabal:

Hi MJ,
You need to out the string URL as:
source: '<%=getPlaces.toString()%>'

Maybe that could be the problem

Thanks for the suggestion, but it did not work. Still waiting ...

[meera prince, módosítva 10 év-val korábban]

Hi ALL
Go through following links its working example AUI Auto Complete List in Liferay 6.2

http://www.liferaysavvy.com/2014/02/liferay-aui-auto-complete-list.html

Regards,
Meera Prince

[Petteri Karttunen, módosítva 10 év-val korábban]

My use case was the same as yours. The problem was to get JSON results parsed correctly even with defining json sourceType manually. I was able to get it to work by implementing resultListLocator and resultTextLocator followingly.

<aui:input name="acTest" type="text" />
 
<portlet:resourceurl var="acURL" id="yourResourceRequestId" />

<aui:script>
	AUI().use('aui-base', 'aui-io', 'autocomplete', function (A) {

		var ds = new A.DataSource.IO({
			source: '&lt;%=acURL.toString() %&gt;'
		});

		A.one('#<portlet:namespace />acTest').plug(A.Plugin.AutoComplete, {
			maxResults: 50,
			resultTextLocator: function (result) {
				console.log(result);
				return result.name;
    		        },
			requestTemplate: '&amp;<portlet:namespace />keywords={query}',
			resultListLocator: function (response) {
				var responseData = A.JSON.parse(response[0].responseText);
				console.log(responseData);
				return responseData.results;
			},
			source: ds
		});
	});
</aui:script>

JSON generation on the backing side:

...
			JSONArray array = JSONFactoryUtil.createJSONArray();

			for (User x : list) {
				JSONObject hit = JSONFactoryUtil.createJSONObject();

				hit.put("key", x.getUserId());
				hit.put("name", x.getFullName());
				array.put(hit);
			}
			JSONObject results = JSONFactoryUtil.createJSONObject();
			results.put("results, array);
....

[meera prince, módosítva 10 év-val korábban]

Hi

Please have a look into following link it may help you

http://www.liferaysavvy.com/2014/02/liferay-auto-complete-list-with-ajax.html


Regards,
Meera Prince

[Kyle Joseph Stiemann, módosítva 10 év-val korábban]

Sorry, I did not realize that you were not using JSF. Moving this to the AlloyUI forums.

- Kyle

[Raquel Alamán, módosítva 10 év-val korábban]

Hi Shabahj!

In Alloy Ui/Bootsrap migration, there have been several changes (one of them A.DataSource.IO). You can see a list on this link:
Bootstrap migration

I have the same problem so when I have solve it I'll tell you.

[Reigo Reinmets, módosítva 9 év-val korábban]

Since I didn't find a good tutorial for how to use Autocomplete with Service Builder generated JSON service on Liferay 6.2 I decided to make one myself.
It uses service builder generated "contact" service to find contacts by name as an example and demonstrates how to build custom query template and result parsing.
I've implemented a sample datasource, query template, result list locator, result formatter and even the result text locator.

You can check out the tutorial here: AUI Autocomplete with Service Builder JSON