Fóruns

Início » Liferay Portal » English » 3. Development

Visualização combinada Visão plana Exibição em árvore
Tópicos [ Anterior | Próximo ]
toggle
AUI - Need AutoComplete example that fetches json data through ajax/sjax Thomas Berg 14 de Junho de 2010 00:21
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Tanweer . 7 de Julho de 2010 07:52
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Mauricio Saglietto 12 de Julho de 2010 11:38
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Tanweer . 13 de Julho de 2010 12:20
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Tanweer . 27 de Julho de 2010 10:00
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Scott Lee 23 de Setembro de 2010 18:52
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Henk Schipper 27 de Setembro de 2010 06:50
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Tanweer . 1 de Outubro de 2010 06:41
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Corné Aussems 5 de Outubro de 2010 14:53
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Corné Aussems 6 de Outubro de 2010 02:34
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Jelmer Kuperus 6 de Outubro de 2010 22:24
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Corné Aussems 7 de Outubro de 2010 00:21
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Thomas Berg 13 de Outubro de 2010 02:00
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Jelmer Kuperus 13 de Outubro de 2010 14:19
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Thomas Berg 14 de Outubro de 2010 06:54
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Rakesh Goswami 11 de Maio de 2012 01:32
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Mazhar Alam 4 de Julho de 2012 03:58
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Akash Mohan Patil 13 de Agosto de 2012 05:17
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Aneesha Rao 21 de Agosto de 2012 02:51
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Antonio Musarra 20 de Dezembro de 2012 02:08
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Mohammad Azharuddin 28 de Julho de 2013 23:10
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Mohammad Azharuddin 29 de Julho de 2013 01:48
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Henry K 7 de Dezembro de 2010 11:34
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja R. Code you need 21 de Junho de 2014 07:51
Thomas Berg
AUI - Need AutoComplete example that fetches json data through ajax/sjax
14 de Junho de 2010 00:21
Resposta

Thomas Berg

Ranking: Regular Member

Mensagens: 134

Data de entrada: 7 de Setembro de 2009

Mensagens recentes

The example at http://alloy.liferay.com/demos.php?demo=autocomplete is good but uses a local variable as the datasource. I've been looking for an example that shows how to use AUI.AutoComplete that fetches (json) data from a database through ajax but no luck so far...

So, now I'm turning to the great Liferay community emoticon


My code (which doesn't work for browsers other than Firefox):

 1    window.AC = new A.AutoComplete(
 2        {
 3            dataSource: function(request) {
 4                var items = null;
 5                resUrl.setResourceId("depositSearch");
 6                resUrl.setParameter('search',A.one('#<portlet:namespace/>_searchField').get('value'));
 7                A.io.request(resUrl.toString(), {
 8                    cache: true,
 9                    sync: true,
10                    timeout: 1000,
11                    dataType: 'json',
12                    method: 'get',
13                    on: {
14                        success: function() {
15                            items = this.get('responseData');
16                        },
17                        failure: function() {
18                        }
19                    }
20                });
21
22                return items;
23            },
24            dataSourceType: 'Function',
25            schema:  {
26                metaFields: {javaClass:"javaClass"},
27                resultListLocator: "list",
28                resultFields: ['id', 'name']
29            },
30            schemaType: 'json',
31            forceSelection: true,
32            autoHighlight: false,
33            matchKey: 'id',
34            queryDelay: 0.5,
35            typeAhead: true,
36            contentBox: '#myContainer',
37            input: '#<portlet:namespace/>_searchField'
38        }
39    );


The above works in Firefox. For other browsers, I can see in the logs that calls are made and the results are properly created at the server-side. Internet Explorer 8 fetches and displays the results if I leave the searchbox empty ...

I created a jira ticket for this but am not sure if it's really a bug or just me doing something wrong.

I seem to recall reading something about YUI and problems with synchronous calls sync: true. Maybe this is the reason? But with sync:false, the above fails since items (returned by the datasource function) will be null if not waiting for the data to arrive.

Hopefully, someone has got a solution to this, perhaps using some predefined datasource rather than a function.

Any insight on this would be great!
Tanweer .
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja
7 de Julho de 2010 07:52
Resposta

Tanweer .

Ranking: Expert

Mensagens: 319

Data de entrada: 11 de Março de 2010

Mensagens recentes

Has anyone implemented the Alloy UI AutoComplete functionality.I went through the Alloy UI website but not of much help.
Mauricio Saglietto
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja
12 de Julho de 2010 11:38
Resposta

Mauricio Saglietto

Ranking: New Member

Mensagens: 3

Data de entrada: 4 de Julho de 2010

Mensagens recentes

Im looking for the same .. if u find a way ... let us know ...
Tanweer .
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja
13 de Julho de 2010 12:20
Resposta

Tanweer .

Ranking: Expert

Mensagens: 319

Data de entrada: 11 de Março de 2010

Mensagens recentes

The following alloy autocomplete code works fine.But instead of associating autocomplete with the div element,I want to associate with my input text field.
 1<div id="myAutoComplete"></div>
 2<script type="text/javascript" charset="utf-8">
 3AUI().use('aui-autocomplete', function(A) {
 4
 5    var cities = [
 6            ['AH', 'Ahmedabad', 'The Land of IIM'],
 7            ['AM', 'Amritsar', 'City of golden Temple'],
 8            ['BL', 'Bangalore', 'Silicon Valley of India'],
 9            ['CA', 'Calcutta', 'City of Joy'],
10            ['DL', 'Delhi', 'Land of Hearts'],
11            ['JA', 'Jaipur', 'The Pink City'],
12            ['JP', 'Jodhpur', 'The Blue City'],
13            ['SU', 'surat', '.Diamond City']
14 ];
15
16    window.AC = new A.AutoComplete(
17        {
18            dataSource: cities,
19            schema: {
20                resultFields: ['key', 'name', 'description']
21            },
22            matchKey: 'name',
23            delimChar: ',',
24            typeAhead: true,
25            contentBox: '#myAutoComplete'
26        }
27    );
28       AC.render();
29});
30</script>


Any help will be much appreciated
Tanweer .
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja
27 de Julho de 2010 10:00
Resposta

Tanweer .

Ranking: Expert

Mensagens: 319

Data de entrada: 11 de Março de 2010

Mensagens recentes

Hello every1,

Still waiting for the implemented code....
Scott Lee
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja
23 de Setembro de 2010 18:52
Resposta

Scott Lee

LIFERAY STAFF

Ranking: Junior Member

Mensagens: 54

Data de entrada: 26 de Setembro de 2006

Mensagens recentes

to hook it onto an input text field, just add the "input: '#<portlet:namespace/>to" option like Thomas had posted.

1<div id="<portlet:namespace />autoCompleteContainer">
2    <aui:input name="to" value="<%= to %>" />
3</div>

Hope that helps
Henk Schipper
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja
27 de Setembro de 2010 06:50
Resposta

Henk Schipper

Ranking: New Member

Mensagens: 10

Data de entrada: 26 de Janeiro de 2007

Mensagens recentes

@Scott

Please don't understand me wrong, but I am still getting a bit used to alloy. What should be the correct code when using a datasource in ajax. I tried several things and I know my servlet is working (excuse the language) to retrieve the words/products, and my ajax call is correct, because I see my data which is being transfered, but the last part. I cannot get the data in the autocomplete field.

I used the example of Thomas. But please extend the source.

Henk
Tanweer .
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja
1 de Outubro de 2010 06:41
Resposta

Tanweer .

Ranking: Expert

Mensagens: 319

Data de entrada: 11 de Março de 2010

Mensagens recentes

THnx Scott ,

Sooper...
Corné Aussems
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja
5 de Outubro de 2010 14:53
Resposta

Corné Aussems

Ranking: Liferay Legend

Mensagens: 1311

Data de entrada: 3 de Outubro de 2006

Mensagens recentes

Hi all,
I managed to get the ajax call return this JSON string [{"id":"1","name":"testname 1"},{"id":"2","name":"testname 2"}] but i get a yellow Icon and no autocomplete.

Could someone help me out here?
 1
 2<div id="myContainer">
 3  <aui:input name="searchField" value="" />
 4</div>
 5
 6
 7
 8<aui:script use="aui-dialog,liferay-portlet-url">
 9AUI().use('aui-autocomplete', function(A) {
10    window.AC = new A.AutoComplete(
11        {
12            dataSource: function(request) {
13                var items = null;
14         var urlS = '<portlet:resourceURL  id="search" />'+'&search='+A.one('#<portlet:namespace/>searchField').get('value');
15                A.io.request(urlS, {
16                    cache: true,
17                    sync: true,
18                    timeout: 1000,
19                    dataType: 'json',
20                    method: 'get',
21                    on: {
22                        success: function() {
23                            items = this.get('responseData');
24                        },
25                        failure: function() {
26                        }
27                    }
28                });
29
30                return items;
31            },
32            dataSourceType: 'Function',
33            schema: {
34                metaFields: {javaClass:"javaClass"},
35                resultListLocator: "list",
36                resultFields: ['id', 'name']
37            },
38            schemaType: 'json',
39            forceSelection: true,
40            autoHighlight: false,
41            matchKey: 'id',
42            queryDelay: 0.5,
43            typeAhead: true,
44            contentBox: '#myContainer',
45            input: '#<portlet:namespace/>searchField'
46        }
47    );
48
49    AC.resultTypeList = false;
50    AC.formatResult = function(oResultData, sQuery, sResultMatch) {
51        return ('<span style="color:#191970;">' + sResultMatch + "</span>, " + oResultData.name);
52    };
53
54    AC.render();
55});
56</aui:script>


 1
 2    public void serveResource(ResourceRequest request, ResourceResponse response) throws IOException, PortletException {
 3try {
 4    String searchFor = ParamUtil.getString(request, "search");
 5            
 6    JSONArray jsonResult = com.liferay.portal.kernel.json.JSONFactoryUtil.createJSONArray();
 7               
 8    JSONObject jsonRow = com.liferay.portal.kernel.json.JSONFactoryUtil.createJSONObject();
 9        jsonRow.put("id", "1");
10        jsonRow.put("name", "testname 1");
11        jsonResult.put(jsonRow);
12
13    JSONObject jsonRow2 = com.liferay.portal.kernel.json.JSONFactoryUtil.createJSONObject();
14        jsonRow2.put("id", "2");
15        jsonRow2.put("name", "testname 2");
16        jsonResult.put(jsonRow2);
17
18               
19    _log.debug("serveResource() jsonResult.toString()="+ jsonResult.toString());
20               
21                response.getWriter().append(jsonResult.toString());
22
23            } catch (Exception e) {
24                e.printStackTrace();
25            }
26
27        super.serveResource(request, response);
28    }
Corné Aussems
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja
6 de Outubro de 2010 02:34
Resposta

Corné Aussems

Ranking: Liferay Legend

Mensagens: 1311

Data de entrada: 3 de Outubro de 2006

Mensagens recentes

Just some more considerations it must be the json data that is bugging me because a simple dataset is working fine;

 1window.AC = new A.AutoComplete(
 2        {
 3            dataSource: function(request) {
 4                var items = null;
 5                var urlS = '<portlet:resourceURL  id="search" />'+'&search='+A.one('#<portlet:namespace/>searchwords').get('value');
 6                A.io.request(urlS, {
 7                    cache: true,
 8                    sync: true,
 9                    timeout: 1000,
10                    method: 'get',
11                    on: {
12                        success: function() {
13                            items =  eval(this.get('responseData')); // the evil eval
14                        },
15                        failure: function() {
16                        }
17                    }
18                });
19
20                return items;
21            },
22            dataSourceType: 'Function',
23            schema: {
24                resultFields: ['name']
25            },
26            matchKey: 'name',
27            delimChar: '',
28            typeAhead: true,
29            contentBox: '#myContainer',
30            input: '#<portlet:namespace/>searchwords'            
31
32        }
33    );
34    AC.render();
Jelmer Kuperus
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja
6 de Outubro de 2010 22:24
Resposta

Jelmer Kuperus

Ranking: Liferay Legend

Mensagens: 1192

Data de entrada: 10 de Março de 2010

Mensagens recentes

I was playing around with this tonight. attached you will find an example portlet that demonstrates the use of the AutoComplete component.

it includes both a plain javascript and ajax example.

I hope this helps
Anexos: autocomplete-portlet-6.0.6.1.war (17,4k)
Corné Aussems
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja
7 de Outubro de 2010 00:21
Resposta

Corné Aussems

Ranking: Liferay Legend

Mensagens: 1311

Data de entrada: 3 de Outubro de 2006

Mensagens recentes

Thanks for your help again Jelmer;

My problem was as stupid as ever;
1 resultListLocator: "list",

I didn't understand that i had to wrap my JsonArray into a JsonObject mapped with the key 'list'.

Cheers
Thomas Berg
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja
13 de Outubro de 2010 02:00
Resposta

Thomas Berg

Ranking: Regular Member

Mensagens: 134

Data de entrada: 7 de Setembro de 2009

Mensagens recentes

Thanks Jelmer! Got the missing piece (defining a datasource)!

Your example works in Firefox but I I cannot get it to work correctly in IE8. When searching, the warning symbol is displayed (see attached image).

I noticed that there's a semicolon (;) missing in view.jsp and thought that might be the reason but it makes no difference:

1autocomplete.generateRequest = function(query) {
2    return {
3        request: '&q=' + query
4    };
5}[color=#F31919];[/color]
Anexo

Anexos: autocomplete-sample-ie8.png (6,3k)
Jelmer Kuperus
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja
13 de Outubro de 2010 14:19
Resposta

Jelmer Kuperus

Ranking: Liferay Legend

Mensagens: 1192

Data de entrada: 10 de Março de 2010

Mensagens recentes

tested it with liferay 6.0.5 on ie 8.0.7600.16385 on windows 7 and i do not have this problem

oh and the missing semi colon is actually not a bug as it is allowed per spec

http://bclary.com/2004/11/07/#a-7.9
Thomas Berg
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja
14 de Outubro de 2010 06:54
Resposta

Thomas Berg

Ranking: Regular Member

Mensagens: 134

Data de entrada: 7 de Setembro de 2009

Mensagens recentes

Hello Jelmer,

Sorry for wasting your time, as it turned out, it wasn't working in Firefox either... Due to the fact that I mixed up which server was currently running!

I have one 6.0.5 server and one 6.0.10. On the latter I escape all URLS by default so by adding

1var dataSource = new A.DataSource.IO(
2    {
3        source: '<portlet:resourceURL [color=#1F22E6]escapeXml="false"[/color] />'
4    }
5);


It works in both IE and Firefox...

Thanks again

Regards Thomas
Henry K
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja
7 de Dezembro de 2010 11:34
Resposta

Henry K

Ranking: Junior Member

Mensagens: 40

Data de entrada: 27 de Janeiro de 2010

Mensagens recentes

I can't get remote data to work with autocomplete. What am I doing wrong? Thanks for any help you can provide.

drop-down-1 will work just fine, but drop-down-2 returns the exclamation mark.

http://localhost:8080/c/journal/get_template?groupId=10165&templateId=11803 is simply a template that has ["Chicago","Charlotte","New York","New Brunswick"] as its content.


<h1>No ajax</h1>

<div id="<portlet:namespace />drop-down-1"></div>

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

var cities = ["Chicago","Charlotte","New York","New Brunswick"];

new A.AutoComplete(
{
dataSource: cities,
schema: {
resultFields: ['name']
},
matchKey: 'name',
delimChar: ',',
typeAhead: true,
contentBox: '#<portlet:namespace />drop-down-1'
}
).render();

</aui:script>


<h1>Ajax</h1>
<div id="<portlet:namespace />drop-down-2"></div>


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

var remoteCities = new A.DataSource.IO( { source: 'http://localhost:8080/c/journal/get_template?groupId=10165&templateId=11803'} );

var autocomplete = new A.AutoComplete(
{
dataSource: remoteCities,
schema: {
resultFields: ['name']
},
matchKey: 'name',
delimChar: ',',
typeAhead: true,
contentBox: '#<portlet:namespace />drop-down-2'
}
).render();


autocomplete.generateRequest = function(query) {
return {
request: '&q=' + query
};
}

autocomplete.render();

</aui:script>
Rakesh Goswami
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja
11 de Maio de 2012 01:32
Resposta

Rakesh Goswami

Ranking: New Member

Mensagens: 15

Data de entrada: 20 de Fevereiro de 2012

Mensagens recentes

please check this..I am facing problem on ajax call with alloy UI.
allou ui and ajax
Mazhar Alam
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja
4 de Julho de 2012 03:58
Resposta

Mazhar Alam

Ranking: Regular Member

Mensagens: 201

Data de entrada: 25 de Novembro de 2011

Mensagens recentes

Helpful post
Akash Mohan Patil
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja
13 de Agosto de 2012 05:17
Resposta

Akash Mohan Patil

Ranking: Junior Member

Mensagens: 70

Data de entrada: 12 de Dezembro de 2010

Mensagens recentes

jelmer kuperus:
I was playing around with this tonight. attached you will find an example portlet that demonstrates the use of the AutoComplete component.

it includes both a plain javascript and ajax example.

I hope this helps



HI, Thanks, gr8 war file. easy to understand and customize
Aneesha Rao
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja
21 de Agosto de 2012 02:51
Resposta

Aneesha Rao

Ranking: New Member

Mensagens: 14

Data de entrada: 24 de Fevereiro de 2012

Mensagens recentes

Hi,

How can i use the same code for directory portlet?
I am not able to include it in a hook.
Please help.

--Regards,
Aneesha
Antonio Musarra
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja
20 de Dezembro de 2012 02:08
Resposta

Antonio Musarra

Ranking: Junior Member

Mensagens: 25

Data de entrada: 9 de Agosto de 2011

Mensagens recentes

Hi,
Try to see the complete example at Alloy UI AutoComplete Ajax Example
Instead the repository https://github.com/amusarra/liferay-aui-autocomplete-ajax-example find the complete project format maven.

Bye,
Antonio.emoticon
Mohammad Azharuddin
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja
28 de Julho de 2013 23:10
Resposta

Mohammad Azharuddin

Ranking: Expert

Mensagens: 471

Data de entrada: 17 de Setembro de 2012

Mensagens recentes

Hi Jelmer Kuperus
I implemented autocomplete which takes multiple inputs seperated by comma,which include duplicate as well.so how can i avoid duplicates

HTH
Mohammad Azharuddin
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja
29 de Julho de 2013 01:48
Resposta

Mohammad Azharuddin

Ranking: Expert

Mensagens: 471

Data de entrada: 17 de Setembro de 2012

Mensagens recentes

Hi all

here input field should not accept duplicate data..there are two electronics.so if user select electronics for the second time it should not accept.Any solution
Anexo

Anexos: autocomplte.png (5,9k)
R. Code you need
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja
21 de Junho de 2014 07:51
Resposta

R. Code you need

Ranking: New Member

Mensagens: 4

Data de entrada: 28 de Julho de 2010

Mensagens recentes

Since I didn't find a good tutorial for how to use Autocomplete with Service Builder JSON service I decided to make one myself.
It uses service builder based "contact" service to find contacts by name 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/