You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by George Ludwig <ge...@gmail.com> on 2013/05/16 00:50:52 UTC

Customize autocomplete mixin match list?

I want customize the look of each item in the list created by the
Autocomplete mixin.

Currently, I just return an id for each object. But I'd rather return
HTML-formatted output.

For example, right now I just return a simple String to populate the match
list:

return getName();

But I want to add more complex output. For example this:

return "<span class="name">"+getNam()+"</span><span class="url"
style=\"float: right;\">"+getUrl()+"</span>";

The problem is, the Autocomplete mixin treats it as a literal String.

Is there any way to really customize the presentation of each row in the
match list?

Re: Customize autocomplete mixin match list?

Posted by Ilya Obshadko <il...@gmail.com>.
Any kind of success on this?

I've been looking for ways to customize tapestry5-jquery autocomplete mixin
output, and this is not very obvious.


On Wed, May 22, 2013 at 12:50 AM, George Ludwig <ge...@gmail.com>wrote:

> Thanks for the replies...still working on this....
>
> @Lance: Did you mean override protected JSONArray generateResponseJSON(List
> matches)? This method already works as I'd like it to...it calls the
> toString() method on every element of the list:
>
> protected JSONArray generateResponseJSON(List matches)
>
>     {
>
>         JSONArray array = new JSONArray();
>
>         for (Object o : matches)
>
>         {
>
>             if (o instanceof JSONObject) array.put(o);
>
>             else array.put(o.toString());
>
>         }
>
>         return array;
>
>     }
>
>
> I'm already able to supply a list of objects that outputs the desired html
> when generateResponseJSON is invoked, however the output is treated as a
> string literal when displayed. I.e., I want each element in the list to be
> like this, and to be rendered as html:
>
> <span>someText</span><span style=\"float: right;\">someOtherText</span>
>
> But when the list is displayed, is shows the html markup as literal text,
> i.e. I get this:
>
> "<span>someText</span><span style=\"float: right;\">someOtherText</span>"
>
> when I want this:
>
> "someText      someOtherText"
>
> I looked at the autocomplete code in the debugger, and saw that it seems to
> care about the content type. In the autocomplete method, it does this:
>
> ContentType contentType = responseRenderer.findContentType(this);
>
> which sets the content type to text/html. I would think that as such, it
> would properly render the html. But it h=behaves as if the content type
> were text/plain.
>
> In other words, it seem that I can override that method all I want, but the
> mixin would still treat my markup as literal text.
>
> @Emmanuel: I looked at your example, and while it works great for your use
> case, my use case is more complex. I've created a composite textfield
> component, that includes the autocomplete mixin. I want people to be able
> to use my component and easily customize the output. In another case, I
> have subclassed that original component in to a self-contained object that
> requires its own customization, and trying to bundle the javascript
> override with it doesn't fly. Finally, I need to be able to have more than
> one of these components on the screen, so once again the javascript
> override doesn't work.
>
> What I'd really like to be able to do is override Autocomplete's javascript
> "_renderItem: function( ul, item )" method, so I can handle it in java.
> I've been playing around with the Bind mixin to do this, but without
> success.
>
>
>
>
> On Thu, May 16, 2013 at 1:43 AM, Emmanuel DEMEY <demey.emmanuel@gmail.com
> >wrote:
>
> > Or you can use the one provided by the Tapestry jQuery project. I have
> > already customized the rendering by using this jQuery UI configuration :
> > http://jqueryui.com/autocomplete/#custom-data
> >
> > Manu
> >
> >
> > 2013/5/16 Lance Java <la...@googlemail.com>
> >
> > > You could extend the AutoComplete mixin and override
> > > generateResponseMarkup.
> > >
> >
> >
> >
> > --
> > Emmanuel DEMEY
> > Ingénieur Etude et Développement
> > ATOS Worldline
> > +33 (0)6 47 47 42 02
> > demey.emmanuel@gmail.com
> > http://emmanueldemey.fr/
> >
> > Twitter : @EmmanuelDemey
> >
>



-- 
Ilya Obshadko

Re: Customize autocomplete mixin match list?

Posted by George Ludwig <ge...@gmail.com>.
Thanks for the replies...still working on this....

@Lance: Did you mean override protected JSONArray generateResponseJSON(List
matches)? This method already works as I'd like it to...it calls the
toString() method on every element of the list:

protected JSONArray generateResponseJSON(List matches)

    {

        JSONArray array = new JSONArray();

        for (Object o : matches)

        {

            if (o instanceof JSONObject) array.put(o);

            else array.put(o.toString());

        }

        return array;

    }


I'm already able to supply a list of objects that outputs the desired html
when generateResponseJSON is invoked, however the output is treated as a
string literal when displayed. I.e., I want each element in the list to be
like this, and to be rendered as html:

<span>someText</span><span style=\"float: right;\">someOtherText</span>

But when the list is displayed, is shows the html markup as literal text,
i.e. I get this:

"<span>someText</span><span style=\"float: right;\">someOtherText</span>"

when I want this:

"someText      someOtherText"

I looked at the autocomplete code in the debugger, and saw that it seems to
care about the content type. In the autocomplete method, it does this:

ContentType contentType = responseRenderer.findContentType(this);

which sets the content type to text/html. I would think that as such, it
would properly render the html. But it h=behaves as if the content type
were text/plain.

In other words, it seem that I can override that method all I want, but the
mixin would still treat my markup as literal text.

@Emmanuel: I looked at your example, and while it works great for your use
case, my use case is more complex. I've created a composite textfield
component, that includes the autocomplete mixin. I want people to be able
to use my component and easily customize the output. In another case, I
have subclassed that original component in to a self-contained object that
requires its own customization, and trying to bundle the javascript
override with it doesn't fly. Finally, I need to be able to have more than
one of these components on the screen, so once again the javascript
override doesn't work.

What I'd really like to be able to do is override Autocomplete's javascript
"_renderItem: function( ul, item )" method, so I can handle it in java.
I've been playing around with the Bind mixin to do this, but without
success.




On Thu, May 16, 2013 at 1:43 AM, Emmanuel DEMEY <de...@gmail.com>wrote:

> Or you can use the one provided by the Tapestry jQuery project. I have
> already customized the rendering by using this jQuery UI configuration :
> http://jqueryui.com/autocomplete/#custom-data
>
> Manu
>
>
> 2013/5/16 Lance Java <la...@googlemail.com>
>
> > You could extend the AutoComplete mixin and override
> > generateResponseMarkup.
> >
>
>
>
> --
> Emmanuel DEMEY
> Ingénieur Etude et Développement
> ATOS Worldline
> +33 (0)6 47 47 42 02
> demey.emmanuel@gmail.com
> http://emmanueldemey.fr/
>
> Twitter : @EmmanuelDemey
>

Re: Customize autocomplete mixin match list?

Posted by Emmanuel DEMEY <de...@gmail.com>.
Or you can use the one provided by the Tapestry jQuery project. I have
already customized the rendering by using this jQuery UI configuration :
http://jqueryui.com/autocomplete/#custom-data

Manu


2013/5/16 Lance Java <la...@googlemail.com>

> You could extend the AutoComplete mixin and override
> generateResponseMarkup.
>



-- 
Emmanuel DEMEY
Ingénieur Etude et Développement
ATOS Worldline
+33 (0)6 47 47 42 02
demey.emmanuel@gmail.com
http://emmanueldemey.fr/

Twitter : @EmmanuelDemey

Re: Customize autocomplete mixin match list?

Posted by Lance Java <la...@googlemail.com>.
You could extend the AutoComplete mixin and override
generateResponseMarkup.