[Seaside] Re: Dropdown list with autocomplete?
Sabine Knöfel
sabine.knoefel at gmail.com
Mon Oct 7 14:13:33 UTC 2013
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] <
ml-node+s1294792n4713018h53 at n4.nabble.com> 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
> ml-node+s1294792n86180h75 at n4.nabble.com
> To unsubscribe from Seaside, click here<http://forum.world.st/template/NamlServlet.jtp?macro=unsubscribe_by_code&node=1310907&code=c2FiaW5lLmtub2VmZWxAZ21haWwuY29tfDEzMTA5MDd8MTA0OTM5MTYx>
> .
> 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: http://forum.world.st/Dropdown-list-with-autocomplete-tp4712525p4713022.html
Sent from the Seaside General mailing list archive at Nabble.com.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.squeakfoundation.org/pipermail/seaside/attachments/20131007/41c31937/attachment-0001.htm
More information about the seaside
mailing list