フォーラム

ホーム » Liferay Portal » English » 3. Development

構造的に表示 平面上に表示 ツリー上に表示
スレッド [ 前へ | 次へ ]
toggle
AUI - Need AutoComplete example that fetches json data through ajax/sjax Thomas Berg 2010/06/14 0:21
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Tanweer . 2010/07/07 7:52
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Mauricio Saglietto 2010/07/12 11:38
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Tanweer . 2010/07/13 12:20
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Tanweer . 2010/07/27 10:00
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Scott Lee 2010/09/23 18:52
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Henk Schipper 2010/09/27 6:50
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Tanweer . 2010/10/01 6:41
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Corné Aussems 2010/10/05 14:53
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Corné Aussems 2010/10/06 2:34
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Jelmer Kuperus 2010/10/06 22:24
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Corné Aussems 2010/10/07 0:21
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Thomas Berg 2010/10/13 2:00
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Jelmer Kuperus 2010/10/13 14:19
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Thomas Berg 2010/10/14 6:54
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Rakesh Goswami 2012/05/11 1:32
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Mazhar Alam 2012/07/04 3:58
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Akash Mohan Patil 2012/08/13 5:17
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Aneesha Rao 2012/08/21 2:51
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Antonio Musarra 2012/12/20 2:08
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Mohammad Azharuddin 2013/07/28 23:10
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Mohammad Azharuddin 2013/07/29 1:48
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja Henry K 2010/12/07 11:34
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja R. Code you need 2014/06/21 7:51
Thomas Berg
AUI - Need AutoComplete example that fetches json data through ajax/sjax
2010/06/14 0:21
答え

Thomas Berg

ランク: Regular Member

投稿: 134

参加年月日: 2009/09/07

最近の投稿

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
2010/07/07 7:52
答え

Tanweer .

ランク: Expert

投稿: 319

参加年月日: 2010/03/11

最近の投稿

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
2010/07/12 11:38
答え

Mauricio Saglietto

ランク: New Member

投稿: 3

参加年月日: 2010/07/04

最近の投稿

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
2010/07/13 12:20
答え

Tanweer .

ランク: Expert

投稿: 319

参加年月日: 2010/03/11

最近の投稿

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
2010/07/27 10:00
答え

Tanweer .

ランク: Expert

投稿: 319

参加年月日: 2010/03/11

最近の投稿

Hello every1,

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

Scott Lee

LIFERAY STAFF

ランク: Junior Member

投稿: 54

参加年月日: 2006/09/26

最近の投稿

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
2010/09/27 6:50
答え

Henk Schipper

ランク: New Member

投稿: 10

参加年月日: 2007/01/26

最近の投稿

@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
2010/10/01 6:41
答え

Tanweer .

ランク: Expert

投稿: 319

参加年月日: 2010/03/11

最近の投稿

THnx Scott ,

Sooper...
Corné Aussems
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja
2010/10/05 14:53
答え

Corné Aussems

ランク: Liferay Legend

投稿: 1313

参加年月日: 2006/10/03

最近の投稿

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
2010/10/06 2:34
答え

Corné Aussems

ランク: Liferay Legend

投稿: 1313

参加年月日: 2006/10/03

最近の投稿

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
2010/10/06 22:24
答え

Jelmer Kuperus

ランク: Liferay Legend

投稿: 1192

参加年月日: 2010/03/10

最近の投稿

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
添付ファイル: autocomplete-portlet-6.0.6.1.war (17.4k)
Corné Aussems
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja
2010/10/07 0:21
答え

Corné Aussems

ランク: Liferay Legend

投稿: 1313

参加年月日: 2006/10/03

最近の投稿

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
2010/10/13 2:00
答え

Thomas Berg

ランク: Regular Member

投稿: 134

参加年月日: 2009/09/07

最近の投稿

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]
画像の固定

添付ファイル: autocomplete-sample-ie8.png (6.3k)
Jelmer Kuperus
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja
2010/10/13 14:19
答え

Jelmer Kuperus

ランク: Liferay Legend

投稿: 1192

参加年月日: 2010/03/10

最近の投稿

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
2010/10/14 6:54
答え

Thomas Berg

ランク: Regular Member

投稿: 134

参加年月日: 2009/09/07

最近の投稿

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
2010/12/07 11:34
答え

Henry K

ランク: Junior Member

投稿: 40

参加年月日: 2010/01/27

最近の投稿

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
2012/05/11 1:32
答え

Rakesh Goswami

ランク: New Member

投稿: 15

参加年月日: 2012/02/20

最近の投稿

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
2012/07/04 3:58
答え

Mazhar Alam

ランク: Regular Member

投稿: 201

参加年月日: 2011/11/25

最近の投稿

Helpful post
Akash Mohan Patil
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja
2012/08/13 5:17
答え

Akash Mohan Patil

ランク: Junior Member

投稿: 70

参加年月日: 2010/12/12

最近の投稿

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
2012/08/21 2:51
答え

Aneesha Rao

ランク: New Member

投稿: 14

参加年月日: 2012/02/24

最近の投稿

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
2012/12/20 2:08
答え

Antonio Musarra

ランク: Junior Member

投稿: 26

参加年月日: 2011/08/09

最近の投稿

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
2013/07/28 23:10
答え

Mohammad Azharuddin

ランク: Expert

投稿: 479

参加年月日: 2012/09/17

最近の投稿

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
2013/07/29 1:48
答え

Mohammad Azharuddin

ランク: Expert

投稿: 479

参加年月日: 2012/09/17

最近の投稿

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
画像の固定

添付ファイル: autocomplte.png (5.9k)
R. Code you need
RE: AUI - Need AutoComplete example that fetches json data through ajax/sja
2014/06/21 7:51
答え

R. Code you need

ランク: New Member

投稿: 4

参加年月日: 2010/07/28

最近の投稿

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/