AutoCompleter

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

AutoCompleter

Edward Stow
Hi

Could somebody point out how to obtain the selectedIndex from a
SUAutocompleter. I have seen the example using the passenger -- but
this does not appeal in my case. Currently I have :


        html heading level: 3; with: 'Search for events'.
        html paragraph: [
                html textInput
                        id: 'text';
                        value: text;
                        callback: [ :value | text := value ].

                html div
                        class: 'autocomplete';
                        script: (html autocompleter
                                selectedIndex;   "<--- not sure how to obtain the value from the callback"
                                element: 'text';
                                onSelected: (html request
                                        triggerFormElement: 'text');
                                onSelected: ( "I'm guessing that I need a callback function" )
                                on: #renderListOn: of: self) ]


Thanks
--

Edward Stow
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: AutoCompleter

Lukas Renggli
1. You need to store the autocompleter object in a JavaScript variable.

2. Then in the onSelected: event you can access the method
selectedIndex and serialize it to the client together with the
contents of the form element.

That looks somehow like this (as usual I haven't tested):

   html div
      class: 'autocomplete';
      script: (html autocompleter
         element: 'text';
         assignTo: 'auto';
         onSelected: (html request
            callback: [ :value | index := value asInteger ]
               value: (html autocompleter
                   alias: 'auto';
                   selectedIndex);
            triggerFormElement: 'text')

Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: AutoCompleter

Edward Stow
On Fri, Apr 18, 2008 at 5:13 PM, Lukas Renggli <[hidden email]> wrote:

> 1. You need to store the autocompleter object in a JavaScript variable.
>
>  2. Then in the onSelected: event you can access the method
>  selectedIndex and serialize it to the client together with the
>  contents of the form element.
>
>  That looks somehow like this (as usual I haven't tested):
>
>
>    html div
>       class: 'autocomplete';
>       script: (html autocompleter
>          element: 'text';
>          assignTo: 'auto';
>          onSelected: (html request
>             callback: [ :value | index := value asInteger ]
>                value: (html autocompleter
>                    alias: 'auto';
>                    selectedIndex);
>             triggerFormElement: 'text')
>
Thanks -- this did not work and because I cannot mentally grasp how
this works ... I have concocted a different solution that includes a
unique identifier from each item displayed. The steps are:

1.  Created a subclass of WAUnOrderedListTag and reimplement:

TrUnOrderedEventListTag>>renderListItem:labelled:
        canvas listItem
                id: anObject eventId;  <-- my object has a unique string id
        ... remainder deleted.

This step would be unnecessary if  rendering of the id value were
pluggable such as with #labels:

2.  MyComponent>renderContentOn: is pretty straight forward now:

MyComponent>renderContentOn: html
        html paragraph: [
                html textInput
                        id: 'text';
                        value: text;
                        callback: [ :value | text := value ].
                html div
                        class: 'autocomplete';
                        script: (html autocompleter
                                element: 'text';
                                onSelected: (self selectionHandlerOn: html );
                                on: #renderListOn: of: self) ]

3.  Write a fuction such that the AJAX.Autocompleter
afterUpdateElement event handler is defined with two arguments - the
text and lineItem values.  Return in the function body the lineItem id
value.

MyComponent>selectionHandlerOn: html
        ^(html request
                callback: [:value | value inspect ]
                value: (SUStream new nextPutAll: 'li.id'))
                    asFunction arguments: #('text' 'li')

I'm sure there is a better way to write the request function body.  I
think its a disadvantage to know javascript ... as it always seems
much easier to write the expected output javascript than it is to
write the javascript generation in Smalltalk.

4.  Include the #labels: block in #renderListOn: .  Render the
      items is a collection of my domain objects.

MyComponent>>renderListOn:
        .... item generation removed ...
        (html brush: TrUnOrderedEventListTag new)
                labels: [:each | each eventName];
                list: (items first: (items size min: 10))

To my mind -- this may have been the long way round to the solution
but now each step does not appear to depend on blackmagic.

--

Edward Stow
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: AutoCompleter

John Thornborrow
Hi,

I've recently investigated this area, but didn't get far as the
requirement was removed.

What I started playing with is attached as a fileOut (Blah.st)

Hope this helps.

Regards,
John.


Edward Stow wrote:

> On Fri, Apr 18, 2008 at 5:13 PM, Lukas Renggli <[hidden email]> wrote:
>> 1. You need to store the autocompleter object in a JavaScript variable.
>>
>>  2. Then in the onSelected: event you can access the method
>>  selectedIndex and serialize it to the client together with the
>>  contents of the form element.
>>
>>  That looks somehow like this (as usual I haven't tested):
>>
>>
>>    html div
>>       class: 'autocomplete';
>>       script: (html autocompleter
>>          element: 'text';
>>          assignTo: 'auto';
>>          onSelected: (html request
>>             callback: [ :value | index := value asInteger ]
>>                value: (html autocompleter
>>                    alias: 'auto';
>>                    selectedIndex);
>>             triggerFormElement: 'text')
>>
> Thanks -- this did not work and because I cannot mentally grasp how
> this works ... I have concocted a different solution that includes a
> unique identifier from each item displayed. The steps are:
>
> 1.  Created a subclass of WAUnOrderedListTag and reimplement:
>
> TrUnOrderedEventListTag>>renderListItem:labelled:
> canvas listItem
> id: anObject eventId;  <-- my object has a unique string id
>         ... remainder deleted.
>
> This step would be unnecessary if  rendering of the id value were
> pluggable such as with #labels:
>
> 2.  MyComponent>renderContentOn: is pretty straight forward now:
>
> MyComponent>renderContentOn: html
> html paragraph: [
> html textInput
> id: 'text';
> value: text;
> callback: [ :value | text := value ].
> html div
> class: 'autocomplete';
> script: (html autocompleter
> element: 'text';
> onSelected: (self selectionHandlerOn: html );
> on: #renderListOn: of: self) ]
>
> 3.  Write a fuction such that the AJAX.Autocompleter
> afterUpdateElement event handler is defined with two arguments - the
> text and lineItem values.  Return in the function body the lineItem id
> value.
>
> MyComponent>selectionHandlerOn: html
> ^(html request
> callback: [:value | value inspect ]
> value: (SUStream new nextPutAll: 'li.id'))
>                     asFunction arguments: #('text' 'li')
>
> I'm sure there is a better way to write the request function body.  I
> think its a disadvantage to know javascript ... as it always seems
> much easier to write the expected output javascript than it is to
> write the javascript generation in Smalltalk.
>
> 4.  Include the #labels: block in #renderListOn: .  Render the
>       items is a collection of my domain objects.
>
> MyComponent>>renderListOn:
>         .... item generation removed ...
> (html brush: TrUnOrderedEventListTag new)
> labels: [:each | each eventName];
> list: (items first: (items size min: 10))
>
> To my mind -- this may have been the long way round to the solution
> but now each step does not appear to depend on blackmagic.
>
--
John Thornborrow
http://www.pinesoft.co.uk


******************************************************************************************************************************************
This email is from Pinesoft Limited. Its contents are confidential to the intended recipient(s) at the email address(es) to which it has been addressed. It may not be disclosed to or used by anyone other than the addressee(s), nor may it be copied in anyway. If received in error, please contact the sender, then delete it from your system. Although this email and attachments are believed to be free of virus, or any other defect which might affect any computer or IT system into which they are received and opened, it is the responsibility of the recipient to ensure that they are virus free and no responsibility is accepted by Pinesoft for any loss or damage arising in any way from receipt or use thereof. *******************************************************************************************************************************************


Pinesoft Limited are registered in England, Registered number: 2914825. Registered office: 266-268 High Street, Waltham Cross, Herts, EN8 7EA

'From Squeak3.10beta of 22 July 2007 [latest update: #7159] on 18 April 2008 at 4:42:10 pm'!
WAComponent subclass: #Blah
        instanceVariableNames: 'text'
        classVariableNames: ''
        poolDictionaries: ''
        category: 'MyStuff'!

!Blah methodsFor: 'data' stamp: 'jmt 4/18/2008 16:37'!
list
        ^ OrderedCollection new
                add: 'foo';
                add: 'bar';
                add: 'foobar';
                add: 'supercalifragalisticexpialidocious';
                add: 'antidisestablishmentarianism';
                yourself! !

!Blah methodsFor: 'data' stamp: 'jmt 4/18/2008 16:35'!
listItems
        ^ self list select: [ :each | each includesSubstring: text caseSensitive: false ]! !


!Blah methodsFor: 'rendering' stamp: 'jmt 4/18/2008 16:41'!
renderContentOn: html
        html textInput
                id: 'text';
                callback: [ :x | text := x ];
                value: text.
        html div
                class: 'autocomplete';
                script: (html autocompleter
                        element: 'text';
                        assignTo: 'auto';
                        onSelected: (html request
                                callback: [ :value | (self listItems at: (value asInteger + 1)) inspect ]
                                value: (html autocompleter alias: 'auto'; selectedIndex));
                        on: #renderListOn: of: self)! !

!Blah methodsFor: 'rendering' stamp: 'jmt 4/18/2008 16:36'!
renderListOn: html
        html unorderedList list: self listItems! !

"-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- "!

Blah class
        instanceVariableNames: ''!

!Blah class methodsFor: 'as yet unclassified' stamp: 'jmt 3/25/2008 12:49'!
canBeRoot
        ^ true! !

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: AutoCompleter

Edward Stow
On Sat, Apr 19, 2008 at 1:43 AM, John Thornborrow <[hidden email]> wrote:

>
>
>  Pinesoft Limited are registered in England, Registered number: 2914825. Registered office: 266-268 High Street, Waltham Cross, Herts, EN8 7EA
>
> 'From Squeak3.10beta of 22 July 2007 [latest update: #7159] on 18 April 2008 at 4:42:10 pm'!
>  WAComponent subclass: #Blah
>         instanceVariableNames: 'text'
>         classVariableNames: ''
>         poolDictionaries: ''
>         category: 'MyStuff'!
>
>  !Blah methodsFor: 'data' stamp: 'jmt 4/18/2008 16:37'!
>  list
>         ^ OrderedCollection new
>                 add: 'foo';
>                 add: 'bar';
>                 add: 'foobar';
>                 add: 'supercalifragalisticexpialidocious';
>                 add: 'antidisestablishmentarianism';
>                 yourself! !
>
>  !Blah methodsFor: 'data' stamp: 'jmt 4/18/2008 16:35'!
>  listItems
>         ^ self list select: [ :each | each includesSubstring: text caseSensitive: false ]! !
>
>
>  !Blah methodsFor: 'rendering' stamp: 'jmt 4/18/2008 16:41'!
>  renderContentOn: html
>         html textInput
>                 id: 'text';
>                 callback: [ :x | text := x ];
>                 value: text.
>         html div
>                 class: 'autocomplete';
>                 script: (html autocompleter
>                         element: 'text';
>                         assignTo: 'auto';
>                         onSelected: (html request
>                                 callback: [ :value | (self listItems at: (value asInteger + 1)) inspect ]
>                                 value: (html autocompleter alias: 'auto'; selectedIndex));
>                         on: #renderListOn: of: self)! !
>
>  !Blah methodsFor: 'rendering' stamp: 'jmt 4/18/2008 16:36'!
>  renderListOn: html
>         html unorderedList list: self listItems! !
>
>  "-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- "!
>
>  Blah class
>         instanceVariableNames: ''!
>
>  !Blah class methodsFor: 'as yet unclassified' stamp: 'jmt 3/25/2008 12:49'!
>  canBeRoot
>         ^ true! !
>
This works a treat -- is there some way for code snippets like these
to be harvested and included in seaside.st or some other support site.

--

Edward Stow
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside