[Seaside] Re: Dropdown list with autocomplete?

Mariano Martinez Peck marianopeck at gmail.com
Wed Oct 16 20:29:03 UTC 2013


Sabine, I have a small question. I was checking your code and I noticed you
have an onBlur:

renderBlockCurrency: html
    ^ [ :fid :mid |
    | theInputCurrency theInputExchanteRate |
    theInputCurrency := html textInput
        id: mid;
        size: 25;
        value: self currency;
        script: (html jQuery this autocomplete
minLength: 0;
 sourceCallback: [ :term | self   currencyNamesFor: term ]);
        callback: [ :value |
                    self currency: value.
                    ];
         onBlur:
                (html prototype evaluator
                       triggerForm: (self currencyFormID);
                        callback: [ :script |  ];
                        return: false)  ]


I guess this is to close the popup/autocomplete if you click outside of it
or something like that.
I want to do the same, but my component is called directly from within
Magritte forms/components so the form was already created by Magriite, not
me.
And from what I can see, Magritte doesn't seem to set an ID for the form.
Is there another way to close the autocomplete once it looses focus?

Thanks,



On Mon, Oct 7, 2013 at 11:13 AM, Sabine Knöfel <sabine.knoefel at gmail.com>wrote:

> Hi Mariano,
>
> fine that it works for you so long.
>
> I am quite busy this days. For this reason, I will keep the solution I
> have.
> But if you succeed with your idea, tell me, please.
>
> Cheers,
> Sabine
>
>
> On Mon, Oct 7, 2013 at 3:59 PM, Mariano Martinez Peck [via Smalltalk] <[hidden
> email] <http://user/SendEmail.jtp?type=node&node=4713022&i=0>> wrote:
>
>>
>>
>>
>> On Sat, Oct 5, 2013 at 12:39 PM, Sabine Knöfel <[hidden email]<http://user/SendEmail.jtp?type=node&node=4713018&i=0>
>> > wrote:
>>
>>> Hi Mariano,
>>>
>>> thank you for the compliment! :-)
>>>
>>>
>> Well, I have just tried it and it works great. So at least we have
>> autocomplete :) Thanks!
>>
>>
>>
>>> An autocomplete as in http://ivaynberg.github.io/select2/  would be
>>> very useful for me too, especially at the page "Days", where the user
>>> selects countries and cities.
>>>
>>> This select2 seems to be very powerful. Please let me know if you find
>>> an integration into Seaside.
>>>
>>>
>> yes, seems very cool. But there are so many libraries like this around...
>>
>> btw...what if (as a temp workaround) we make our autocomplete to react on
>> focus to show all list? Right now it triggers the dropdown when you type
>> something. But we could change it to trigger the dropdown also when it gets
>> the focus? Then in our method called by #sourceCallback: we could check if
>> the string is empty/nil and in such a case we display the whole elements :)
>>   I guess this could work....
>>
>> Cheers,
>>
>>
>>
>>> Sabine
>>>
>>>
>>>
>>>
>>> On Sat, Oct 5, 2013 at 2:39 PM, Mariano Martinez Peck [via Smalltalk] <[hidden
>>> email] <http://user/SendEmail.jtp?type=node&node=4712653&i=0>> wrote:
>>>
>>>>
>>>>
>>>>
>>>> On Sat, Oct 5, 2013 at 8:27 AM, Sabine Knöfel <[hidden email]<http://user/SendEmail.jtp?type=node&node=4712642&i=0>
>>>> > wrote:
>>>>
>>>>> Hi Mariano,
>>>>>
>>>>> I have a working dropdown list with jQuery autocomplete in my seaside
>>>>> application.
>>>>>
>>>>> (Live: www.spesenfuchs.de -> "Ohne Login benutzen", switch to
>>>>> english, then page "Receipts")
>>>>>
>>>>>
>>>> Hi Sabine,
>>>>
>>>> First, let me thank you for the amount of time you took to answer!
>>>> Second, your website looks sooooo cool, really, very nice and
>>>> interesting idea. Congrats!
>>>>
>>>> The field you are talking about is the currency right? While this is a
>>>> big step forward I wondered the following.
>>>> In the currency example, the dropdown list does not appear until you
>>>> type at least one word, right?
>>>> I would love a combination of a typical drop down list in which the
>>>> user can pick scrolling from a list to see the options, while also start
>>>> typing and filtering.
>>>> See the basic example from here: http://ivaynberg.github.io/select2/
>>>>
>>>> I created a fileout with a reduced version of this. This is only demo,
>>>>> I removed all css stuf etc.
>>>>>
>>>>> To see it:
>>>>> 1) take new image
>>>>> 2) install seaside from configurations browser
>>>>> 3) install jQuery widget box
>>>>> Gofer new
>>>>>     url: 'http://smalltalkhub.com/mc/Seaside/JQueryWidgetBox/main';
>>>>>     package: 'ConfigurationOfJQueryWidgetBox';
>>>>>     load.
>>>>> (Smalltalk at: #ConfigurationOfJQueryWidgetBox) project stableVersion
>>>>> load
>>>>> 4) file in the code below
>>>>> 5) do it: RKADemoView initialize
>>>>> 6) do it: (ZnZincServerAdaptor port: 8085) start.
>>>>>
>>>>> 5) in Browser
>>>>> http://localhost:8085/RKADemo
>>>>>
>>>>> The inspect shows that the currency has been set after selecting it.
>>>>> I hope this is what your have been looking for.
>>>>>
>>>>>
>>>> Thanks!  Having a autocomplete working even if it is not the best I
>>>> would need, is way better than my current state and very appreciated!!
>>>> I will test it during the weekend or on Monday (have to leave now).
>>>>
>>>> Thank you very much!
>>>>
>>>>
>>>>
>>>>
>>>>> Sabine
>>>>>
>>>>> FILEOUT:
>>>>>
>>>>> 'From Pharo2.0 of 7 March 2013 [Latest update: #20618] on 5 October
>>>>> 2013 at 1:18:06 pm'!
>>>>> WAComponent subclass: #RKADemoView
>>>>>     instanceVariableNames: 'currency'
>>>>>     classVariableNames: ''
>>>>>     poolDictionaries: ''
>>>>>     category: 'RKA24-View'!
>>>>>
>>>>> !RKADemoView methodsFor: 'updateRoot' stamp: 'sabineknoefel 10/5/2013
>>>>> 12:37'!
>>>>> updateRoot: aHtmlRoot
>>>>>     super updateRoot: aHtmlRoot.
>>>>>     aHtmlRoot javascript url: '
>>>>> https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'.
>>>>>     aHtmlRoot javascript url: '
>>>>> http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js'.
>>>>>
>>>>>     aHtmlRoot javascript url: '
>>>>> https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js'.
>>>>> ! !
>>>>>
>>>>>
>>>>> !RKADemoView methodsFor: 'accessing' stamp: 'sabineknoefel 10/5/2013
>>>>> 12:07'!
>>>>> currency
>>>>>     ^ currency! !
>>>>>
>>>>> !RKADemoView methodsFor: 'accessing' stamp: 'sabineknoefel 10/5/2013
>>>>> 13:17'!
>>>>> currency: aString
>>>>>     currency := aString! !
>>>>>
>>>>>
>>>>> !RKADemoView methodsFor: 'ids' stamp: 'sabineknoefel 10/5/2013 12:31'!
>>>>> currencyFormID
>>>>>     ^ 'currencyFormID'! !
>>>>>
>>>>>
>>>>> !RKADemoView methodsFor: 'render-blocks' stamp: 'sabineknoefel
>>>>> 10/5/2013 13:17'!
>>>>> currencyNamesFor: aString
>>>>>      ^ {'Euro'.
>>>>>     'Dinar'.
>>>>>     'Yen'.
>>>>>     'Schilling'.
>>>>>     'Som'.
>>>>>     'Riel'.
>>>>>     'Franc'.
>>>>>     'Won'.
>>>>>     'Tenge'.
>>>>>     'Kip'.
>>>>>     'Pfund'.
>>>>>     'Rupie'} select: [ :each | ('*',aString,'*') match: each ]
>>>>>
>>>>>  ! !
>>>>>
>>>>> !RKADemoView methodsFor: 'render-blocks' stamp: 'sabineknoefel
>>>>> 10/5/2013 13:12'!
>>>>> renderBlockCurrency: html
>>>>>     ^ [ :fid :mid |
>>>>>     | theInputCurrency theInputExchanteRate |
>>>>>     theInputCurrency := html textInput
>>>>>         id: mid;
>>>>>         size: 25;
>>>>>         value: self currency;
>>>>>         script: (html jQuery this autocomplete sourceCallback: [ :term
>>>>> | self   currencyNamesFor: term ]);
>>>>>         callback: [ :value |
>>>>>                     self currency: value.
>>>>>                     self currency inspect ];
>>>>>          onBlur:
>>>>>                 (html prototype evaluator
>>>>>                         triggerForm: (self currencyFormID);
>>>>>                         callback: [ :script |  ];
>>>>>                         return: false)  ]  ! !
>>>>>
>>>>>
>>>>> !RKADemoView methodsFor: 'rerender' stamp: 'sabineknoefel 10/5/2013
>>>>> 12:33'!
>>>>> reRenderCurrencyOn: html
>>>>>     self reRenderControl: (self renderBlockCurrency: html) formID:
>>>>> self currencyFormID on: html! !
>>>>>
>>>>>
>>>>> !RKADemoView methodsFor: 'rendering' stamp: 'sabineknoefel 10/5/2013
>>>>> 12:33'!
>>>>> renderContentOn: html
>>>>>     self renderCurrencyOn:   html! !
>>>>>
>>>>> !RKADemoView methodsFor: 'rendering' stamp: 'sabineknoefel 10/5/2013
>>>>> 12:20'!
>>>>> renderControl: aBlock formID: aFormID on: html
>>>>>     html form
>>>>>         id: aFormID;
>>>>>         with: [ aBlock value: aFormID value: aFormID , 'id']! !
>>>>>
>>>>> !RKADemoView methodsFor: 'rendering' stamp: 'sabineknoefel 10/5/2013
>>>>> 12:32'!
>>>>> renderCurrencyOn: html
>>>>>     self
>>>>>         renderControl: (self renderBlockCurrency: html)
>>>>>         formID: self currencyFormID
>>>>>         on: html! !
>>>>>
>>>>>
>>>>> !RKADemoView methodsFor: 'updateOn' stamp: 'sabineknoefel 10/5/2013
>>>>> 12:33'!
>>>>> updateCurrencyOn: html
>>>>>     html prototype element
>>>>>         id: self currencyFormID;
>>>>>         update: [ :renderer | self reRenderCurrencyOn: html renderer
>>>>> ]! !
>>>>>
>>>>> "-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- "!
>>>>>
>>>>> RKADemoView class
>>>>>     instanceVariableNames: ''!
>>>>>
>>>>> !RKADemoView class methodsFor: 'initialize' stamp: 'sabineknoefel
>>>>> 10/5/2013 12:36'!
>>>>> canBeRoot
>>>>>     ^ true! !
>>>>>
>>>>> !RKADemoView class methodsFor: 'initialize' stamp: 'sabineknoefel
>>>>> 10/5/2013 13:11'!
>>>>> initialize
>>>>>     "RKADemoView initialize."
>>>>>
>>>>>     WAAdmin register: self asApplicationAt: 'RKADemo'.
>>>>>     JQuery functionName: 'jQuery'.
>>>>>     ! !
>>>>>
>>>>>
>>>>> RKADemoView initialize!
>>>>>
>>>>>
>>>>>
>>>>> On Fri, Oct 4, 2013 at 5:44 PM, Paul DeBruicker [via Smalltalk] <[hidden
>>>>> email] <http://user/SendEmail.jtp?type=node&node=4712640&i=0>> wrote:
>>>>>
>>>>>> The JQDeployment* and JQGoogle* libraries are the same file, one is
>>>>>> served from the image and the other is served from Google's CDN.  Choose
>>>>>> either one and go with that.
>>>>>>
>>>>>> Also the JQuery libraries should come first in the list as I assume
>>>>>> they are served in the order displayed and the JQuery dependent stuff will
>>>>>> fail if its not present when they are loaded.
>>>>>>
>>>>>> Check your browser's development tools for javascript errors.
>>>>>>
>>>>>> In Chrome I think you hit F12 to open the dev tools
>>>>>>
>>>>>>
>>>>>>
>>>>>> On Oct 4, 2013, at 8:07 AM, Mariano Martinez Peck <[hidden email]<http://user/SendEmail.jtp?type=node&node=4712549&i=0>>
>>>>>> wrote:
>>>>>>
>>>>>> > Thanks Johan. I am trying the very same example of
>>>>>> JQAutocompleteFunctionalTest doing a simple:
>>>>>> >
>>>>>> > self call: JQAutocompleteFunctionalTest new.
>>>>>> >
>>>>>> > in my app but it does not seem to work...nothing is displayed. I
>>>>>> put a halt in sourceCallback:  but never halts.
>>>>>> > It is the first time I install JQuery in this app so I may have
>>>>>> done something wrong.
>>>>>> > The file libraries I added are the ones you can see in the
>>>>>> screenshot. Is there anything else I should do?
>>>>>> >
>>>>>> > Thanks!
>>>>>> >
>>>>>> >
>>>>>> >
>>>>>> > On Fri, Oct 4, 2013 at 11:14 AM, Johan Brichau <[hidden email]<http://user/SendEmail.jtp?type=node&node=4712549&i=1>>
>>>>>> wrote:
>>>>>> > At a certain point in time, this autocompleter got added to jQuery
>>>>>> itself.
>>>>>> >
>>>>>> > Therefore, the jQuery autocomplete comes with the jQueryUI package
>>>>>> of Seaside itself.
>>>>>> > Look for JQAutocomplete if you loaded jQueryUI with Seaside
>>>>>> >
>>>>>> > On 04 Oct 2013, at 16:00, Mariano Martinez Peck <[hidden email]<http://user/SendEmail.jtp?type=node&node=4712549&i=2>>
>>>>>> wrote:
>>>>>> >
>>>>>> > > Hi guys,
>>>>>> > >
>>>>>> > > I am searching for a dropdown list with autocomplete, ideally,
>>>>>> already integrated with seaside. I am experimenting with Twitter Bootstrap
>>>>>> for some part of the application so I saw there are a few projects like
>>>>>> "Select2", "typeahead", "Bootstrap Combobox", etc...they normall end up
>>>>>> using jquery.js. But none of them is already integrated in Seaside...
>>>>>> > >
>>>>>> > > I saw JQueryWidgetBox, but in
>>>>>> http://smalltalkhub.com/#!/~Seaside/JQueryWidgetBox
>>>>>> > > in the entry: Autocomplete
>>>>>> http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
>>>>>> > > If you follow that it says the plugin has been deprecated...
>>>>>>
>>>>>> > >
>>>>>> > > I am using Seaside 3.0. Anyway has a working dropdown list with
>>>>>> autocomplete?
>>>>>> > >
>>>>>> > > Thank you very much in advance,
>>>>>> > >
>>>>>> > > --
>>>>>> > > Mariano
>>>>>> > > http://marianopeck.wordpress.com
>>>>>> > > _______________________________________________
>>>>>> > > seaside mailing list
>>>>>> > > [hidden email]<http://user/SendEmail.jtp?type=node&node=4712549&i=3>
>>>>>> > >
>>>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>>>> >
>>>>>> > _______________________________________________
>>>>>> > seaside mailing list
>>>>>> > [hidden email]<http://user/SendEmail.jtp?type=node&node=4712549&i=4>
>>>>>> > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>>>> >
>>>>>> >
>>>>>> >
>>>>>> > --
>>>>>> > Mariano
>>>>>> > http://marianopeck.wordpress.com
>>>>>> > <Screen Shot 2013-10-04 at 12.04.34
>>>>>> PM.png>_______________________________________________
>>>>>> > seaside mailing list
>>>>>> > [hidden email]<http://user/SendEmail.jtp?type=node&node=4712549&i=5>
>>>>>> > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>>>>
>>>>>> _______________________________________________
>>>>>> seaside mailing list
>>>>>> [hidden email] <http://user/SendEmail.jtp?type=node&node=4712549&i=6>
>>>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>>>>
>>>>>>
>>>>>> ------------------------------
>>>>>>  If you reply to this email, your message will be added to the
>>>>>> discussion below:
>>>>>>
>>>>>> http://forum.world.st/Dropdown-list-with-autocomplete-tp4712525p4712549.html
>>>>>>  To start a new topic under Seaside General, email [hidden email]<http://user/SendEmail.jtp?type=node&node=4712640&i=1>
>>>>>> To unsubscribe from Seaside, click here.
>>>>>> NAML<http://forum.world.st/template/NamlServlet.jtp?macro=macro_viewer&id=instant_html%21nabble%3Aemail.naml&base=nabble.naml.namespaces.BasicNamespace-nabble.view.web.template.NabbleNamespace-nabble.view.web.template.NodeNamespace&breadcrumbs=notify_subscribers%21nabble%3Aemail.naml-instant_emails%21nabble%3Aemail.naml-send_instant_email%21nabble%3Aemail.naml>
>>>>>>
>>>>>
>>>>>
>>>>> ------------------------------
>>>>> View this message in context: Re: Dropdown list with autocomplete?<http://forum.world.st/Dropdown-list-with-autocomplete-tp4712525p4712640.html>
>>>>> Sent from the Seaside General mailing list archive<http://forum.world.st/Seaside-General-f86180.html>at Nabble.com.
>>>>>
>>>>> _______________________________________________
>>>>> seaside mailing list
>>>>> [hidden email] <http://user/SendEmail.jtp?type=node&node=4712642&i=1>
>>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>>>
>>>>>
>>>>
>>>>
>>>> --
>>>> Mariano
>>>> http://marianopeck.wordpress.com
>>>>
>>>> _______________________________________________
>>>> seaside mailing list
>>>> [hidden email] <http://user/SendEmail.jtp?type=node&node=4712642&i=2>
>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>>
>>>>
>>>> ------------------------------
>>>>  If you reply to this email, your message will be added to the
>>>> discussion below:
>>>>
>>>> http://forum.world.st/Dropdown-list-with-autocomplete-tp4712525p4712642.html
>>>>  To start a new topic under Seaside General, email [hidden email]<http://user/SendEmail.jtp?type=node&node=4712653&i=1>
>>>> To unsubscribe from Seaside, click here.
>>>> NAML<http://forum.world.st/template/NamlServlet.jtp?macro=macro_viewer&id=instant_html%21nabble%3Aemail.naml&base=nabble.naml.namespaces.BasicNamespace-nabble.view.web.template.NabbleNamespace-nabble.view.web.template.NodeNamespace&breadcrumbs=notify_subscribers%21nabble%3Aemail.naml-instant_emails%21nabble%3Aemail.naml-send_instant_email%21nabble%3Aemail.naml>
>>>>
>>>
>>>
>>> ------------------------------
>>> View this message in context: Re: Dropdown list with autocomplete?<http://forum.world.st/Dropdown-list-with-autocomplete-tp4712525p4712653.html>
>>> Sent from the Seaside General mailing list archive<http://forum.world.st/Seaside-General-f86180.html>at Nabble.com.
>>>
>>> _______________________________________________
>>> seaside mailing list
>>> [hidden email] <http://user/SendEmail.jtp?type=node&node=4713018&i=1>
>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>
>>>
>>
>>
>> --
>> Mariano
>> http://marianopeck.wordpress.com
>>
>> _______________________________________________
>> seaside mailing list
>> [hidden email] <http://user/SendEmail.jtp?type=node&node=4713018&i=2>
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>
>>
>> ------------------------------
>>  If you reply to this email, your message will be added to the
>> discussion below:
>>
>> http://forum.world.st/Dropdown-list-with-autocomplete-tp4712525p4713018.html
>>  To start a new topic under Seaside General, email [hidden email]<http://user/SendEmail.jtp?type=node&node=4713022&i=1>
>> To unsubscribe from Seaside, click here.
>> NAML<http://forum.world.st/template/NamlServlet.jtp?macro=macro_viewer&id=instant_html%21nabble%3Aemail.naml&base=nabble.naml.namespaces.BasicNamespace-nabble.view.web.template.NabbleNamespace-nabble.view.web.template.NodeNamespace&breadcrumbs=notify_subscribers%21nabble%3Aemail.naml-instant_emails%21nabble%3Aemail.naml-send_instant_email%21nabble%3Aemail.naml>
>>
>
>
> ------------------------------
> View this message in context: Re: Dropdown list with autocomplete?<http://forum.world.st/Dropdown-list-with-autocomplete-tp4712525p4713022.html>
> Sent from the Seaside General mailing list archive<http://forum.world.st/Seaside-General-f86180.html>at Nabble.com.
>
> _______________________________________________
> seaside mailing list
> seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
>


-- 
Mariano
http://marianopeck.wordpress.com
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.squeakfoundation.org/pipermail/seaside/attachments/20131016/25c62e03/attachment-0001.htm


More information about the seaside mailing list