Skip to main content

Publishing onChange event with yahoo autocompleter widget

3 replies [Last post]
Joined: 2008-11-30


i'm building a little app using JSF ans jMaki framework.
I have to use an autocomplete textbox to get remote data while typing ( pretty much like that : ) but i can't catch onChange events in the glue.js (onSelect works well actually).

this is how i declare the widget :


I use a bean to populate the widget with initial datas. The widget manages to autocomplete values with these initial datas and when i select one of them, the following code is triggered :

<br />
jmaki.subscribe("/autocomp/getValues/*",  function(args){<br />
    jmaki.log("/autocomp/ : request from: " + args.widgetId);<br />
    var message = args.value;<br />
    jmaki.log("MEssage : "+message);<br />
    jmaki.log("webroot : "+jmaki.webRoot);</p>
<p>    jmaki.doAjax({</p>
<p>        method: "POST",<br />
        url: jmaki.webRoot+"/faces/TypeHelpBean-givenNameService.ajax",</p>
<p>        content: {cmd: 'query', value: message},<br />
        callback:function(req){<br />
            jmaki.log("returned response is = " + req.responseText);<br />
            var resText = req.responseText;<br />
            var res = eval(resText);<br />
            jmaki.log("final result = " + res);<br />
            jmaki.publish("/autocomp/setValues", {message: {values:res}});<br />
<p>        onerror: function (m){<br />
            jmaki.log("Error setting filter value.");</p>
<p>        }<br />
    });<br />

(this is an extract from glue.js)

Is it possible to trigger this code with the onchange event, like in the yahoo example?


By the way, here is the log i get during execution :

<br />
Publish  : Topic: /jmaki/runtime/intialized message {}<br />
Publish : Topic: /jmaki/runtime/extensionsLoaded message {}<br />
Publish : Topic: /jmaki/runtime/widget/loaded message {id : 'yahoo_autocomplete24'}<br />
Publish : Topic: /jmaki/runtime/widget/loaded message {id : 'dojo_dijit_combobox25'}<br />
Publish : Topic: /jmaki/runtime/widgetsLoaded message {}<br />
Publish : Topic: /jmaki/runtime/loadComplete message {}<br />
Publish : Topic: /autocomp/getValues//onSelect message {widgetId : 'yahoo_autocomplete24' , topic : '/a<br />
...<br />
 [X]<br />
Publish : Topic: /autocomp/getValues//onSelect message {widgetId : 'yahoo_autocomplete24' , topic : '/autocomp/getValues/' , type : 'onSelect' , targetId : 'yahoo_autocomplete24_item_0' , value : 'AL'}<br />
Subscribe Match : : Topic: /autocomp/getValues//onSelect listener {topic : '*onSelect' , target : {} ,<br />
...<br />
 [X]<br />
Subscribe Match : : Topic: /autocomp/getValues//onSelect listener {topic : '*onSelect' , target : {} , action : 'call' , id : 'jmk_2'}<br />
glue.js : onSelect request from: yahoo_autocomplete24<br />
Subscribe Match : : Topic: /autocomp/getValues//onSelect listener {topic : '/autocomp/getValues/*' , t<br />
...<br />
 [X]<br />
Subscribe Match : : Topic: /autocomp/getValues//onSelect listener {topic : '/autocomp/getValues/*' , target : {} , action : 'call' , id : 'jmk_6'}<br />
/autocomp/ : request from: yahoo_autocomplete24<br />
MEssage : AL<br />
webroot : <a href="http://localhost:8084/WebApplication2" title="http://localhost:8084/WebApplication2">http://localhost:8084/WebApplication2</a><br />
returned response is = [["toto" ],["titi" ],["tutu" ]]<br />
final result = toto,titi,tutu<br />
Publish : Topic: /autocomp/setValues message {message : {values : toto,titi,tutu}}<br />

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
Joined: 2008-11-30

Hi again,

I have a look at this thread :
and i've tried this :

args="{completionMethod : 'server'}"

with, this test.jsp :

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

{ items : [
{label : 'Alabama', value : 'AL'},
{label : 'Alabama 2', value : 'AL 2'},
{label : 'Alabama 3', value : 'AL 2'},
{label : 'California', value : 'CA'},
{label : 'New York', value : 'NY'},
{label : 'Texas', value : 'TX'}

Now, test.jsp i trigger when i type a key, but no publishing for the onSelect event...
By the way, i prefer to use ajax managed beans than this kind of trick to make things work.

Any ideas? Please, help!

Joined: 2003-07-31

Did you replace your /yahoo/autocomplete/component.js with:*checkout*/widgets/trunk/code...

The updates I believe should enable what you are looking for.

You may not want to use the publish of :


This will publish all events to :


The publish is always the base for all publishes and it will still get picked up if you subscribe to "*onSelect" if that is what you had hoped for.

Let me know if this does what you hope for.


Joined: 2008-11-30

Hi Greg,

Thanx for the answer. I've already update the component.js for the yahoo autocomplete widget.

My aim in this project is to provide a

containing one, or more, autocomplete fields.
For these fields, i hope a dynamic behavior so they can provide values when users type in the field.

1. i manage to get the dynamic behavior i espect with the "service" property added to the widget. This "service" is a jsp page, and, to be honest, i'd rather prefer using a method from my bean than this servlet.
Is it possible to do so? Is it possible to call this method from TypeHelpBean?

public void givenNameService(FacesContext context, AjaxResult result) {
HttpServletRequest request =
// get the command
String command = request.getParameter("cmd");
System.out.println("Command : "+command);

if ("setValue".equals(command)) {
String value = request.getParameter("value");
} else {
for (int loop=0; loop < given_names.length; loop++){
result.append("[\"" + given_names[loop] + "\" ]");
if (loop < given_names.length -1) result.append(",");

2. If i use the publish/subscribe, why nothing is call when i press a key? I espected so...
for example, if a use this widget :


well, i espect this subscriber from glue.js will be triggered on all events (onselect, onClick, onChange, onKeyUp, etc...)

jmaki.subscribe("/autocomp/getValues/*", function(args){
jmaki.log("/autocomp/ : request from: " + args.widgetId);
var message = args.value;
jmaki.log("Message : "+message);
jmaki.log("webroot : "+jmaki.webRoot);


method: "POST",
url: jmaki.webRoot+"/faces/TypeHelpBean-givenNameService.ajax",

content: {cmd: 'query', value: message},
jmaki.log("returned response is = " + req.responseText);
var resText = req.responseText;
var res = eval(resText);
jmaki.log("final result = " + res);
jmaki.publish("/autocomp/setValues", {message: {values:res}});

onerror: function (m){
jmaki.log("Error setting filter value.");



...but only the onSelect triggers this subscriber.

3. is it possible to use both pubish/subscribe and service properties to make things work? because when i use a "service", onSlect events are not triggered...

4. At last, when a value is selected from the autocomplete list, is there a simple way to submit then?

for example, when i do this :

[u]from my index.jsp :[/u]

args="{completionMethod : 'server'}"


[u]from my form.jsp :[/u]



[u]the result :[/u]
uri: /WebApplication2/form.jsp
method: POST
QueryString: null
Name: submit Value: envoyer
Name: host Value: localhost:8084
Name: user-agent Value: Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv: Gecko/2008102920 Firefox/3.0.4
Name: accept Value: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Name: accept-language Value: fr,en;q=0.8,fr-fr;q=0.6,en-us;q=0.4,ja;q=0.2
Name: accept-encoding Value: gzip,deflate
Name: accept-charset Value: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Name: keep-alive Value: 300
Name: connection Value: keep-alive
Name: referer Value: http://localhost:8084/WebApplication2/index.jsp
Name: cookie Value: JSESSIONID=E389FC4D25610E806BB488856BAD5B4E; UAID=lcq8ojUNGMU1rQdH7vFnfFZwQzf9XPK
Name: content-type Value: application/x-www-form-urlencoded
Name: content-length Value: 14

This is what i hope Greg. I'm deeply sorry for the "novel" i've written here, but i wanted to be the more accurate as i can to explain my problems.

Thanx again for the answer Greg.