My OperaThis topic has been closed. No new entries allowed.
Reason: You can now post comments on articles on Dev Opera
You need to be logged in to post in the forums. If you do not have an account, please sign up first.
An HTML5-style "Google Suggest"
This article is an exploration of some HTML5 form features - input, datalist and external data sources - along with some nifty server-side code to help create an intelligent auto-complete form field, a la Google Suggest, in very few lines of code.( Read the article )
I do believe that it is possibly to copy Google Suggest with new HTML5 elements but your examples unfortunately can't compete with with original GS.
If you mention Google Suggest people will compare you examples with it. And what can I say, maybe GS need "few"
lines of code more but it's far greater experience then HTML5-style.
And complexityis not that big issue as there are plenty of JS libraries with Google suggest-like functionality.
Don't understand me wrong, HTML5 is great thing but to succeed it must provide at least comparable experience to today's JS "hacks".
If you mention Google Suggest people will compare you examples with it. And what can I say, maybe GS need "few"
lines of code more but it's far greater experience then HTML5-style.And complexityis not that big issue as there are plenty of JS libraries with Google suggest-like functionality.
Don't understand me wrong, HTML5 is great thing but to succeed it must provide at least comparable experience to today's JS "hacks".
The point not really to duplicate the user interface, but more so how you can solve the problem in a more "semamntic way" using HTML5. Styling and such would be done on top of the widget.
3. December 2007, 09:08:09 (edited)
I just curious if input event should be fired in case of Paste, Cut or any other action that can change field?
I started digging this issue while developing a widget with word counter using OUTPUT element.
Update: Ok, I see some improvements here in Opera 9.5 Beta.
Opera 9.5 Beta 1 reacts on pasting and dragging (moving) selected symbols by mouse, but still not handle cut action. So, I think this is just a bug and it should be fixed.
I created small test page on this issue.
I started digging this issue while developing a widget with word counter using OUTPUT element.
Update: Ok, I see some improvements here in Opera 9.5 Beta.
Opera 9.5 Beta 1 reacts on pasting and dragging (moving) selected symbols by mouse, but still not handle cut action. So, I think this is just a bug and it should be fixed.
I created small test page on this issue.
Main browser and mail: 9.27 • Secondary: 10.63 (still has annoying UI regressions: inability to detach tab normally, passes source file w/o extension to external editors)
extendopera.org • Report bugs to public BTS
extendopera.org • Report bugs to public BTS
Bug # 302395
Main browser and mail: 9.27 • Secondary: 10.63 (still has annoying UI regressions: inability to detach tab normally, passes source file w/o extension to external editors)
extendopera.org • Report bugs to public BTS
extendopera.org • Report bugs to public BTS
In the HTML5 working draft ( http://www.w3.org/TR/html5/forms.html#the-datalist-element ), I can't find the data attribute of the datalist element.
Is it still in HTML5 ?
Is it still in HTML5 ?
No, it was removed. We also removed it from Opera. You have to populate the datalist element now with new option elements. To load external data you would use XMLHttpRequest.
In latest Opera build, this code functions :
I shouln't be able to use neither data="?w=" nor oninput="list.data='?w='+encodeURIComponent(value)" ?
<datalist id="suggest" data="?w="></datalist> <input list="suggest" name="q" oninput="list.data='?w='+encodeURIComponent(value)"></label>
I shouln't be able to use neither data="?w=" nor oninput="list.data='?w='+encodeURIComponent(value)" ?
I modified the code to use xmlhttprequest but there is a problem :
When I add/remove options within the datalist element, the suggestions aren't updated directly.
They are only updated
- when I write another character in the input
- when the input looses and gains focus
When typing something in the input, the suggestions are always one character old.
Is it a known problem ? Is there any solution ?
When I add/remove options within the datalist element, the suggestions aren't updated directly.
They are only updated
- when I write another character in the input
- when the input looses and gains focus
When typing something in the input, the suggestions are always one character old.
Is it a known problem ? Is there any solution ?
Nice to see Opera so far ahead of the competition on this, although what we really need is everyone to support these useful controls as soon as possible. It's a real pity that the data attribute was dropped as it seems logical and much easier to work with. What was the reason for it being dropped?
It was dropped because the new form features took a long time to get adopted and we thought we should remove some of the complexity therefore. You can still implement this functionality yourself by dynamically populating the datalist element based on user input. Once all user agents have a reasonable implementation of the new HTML form functionality it might get added again though maybe in a different form.
Originally posted by anne:
It was dropped because the new form features took a long time to get adopted and we thought we should remove some of the complexity therefore. You can still implement this functionality yourself by dynamically populating the datalist element based on user input.
Given the terrible take up of the new elements I can sympathise with the pragmatic approach. There was good article in C'T Magazin (25/2009) which covered the new form elements and I wrote a test page. Apart from Opera pretty much all the new browsers failed across the board, although I do like Chrome's meter widget. Regarding the calendar widget - could we get two months instead of one as often as not dates will be crossing month boundaries. But regarding the data issue: AJAX sucks and the proposed solution was SO much more elegant.
Is there an easy way to check for HTML 5 form support in browsers? From the controversy around <video> you could be forgiven for thinking that HTML5 was only about the video tag! I'd like to have full HTML5 support for the repoze.defom form generation library but how do you approach <input type="date"> for browsers with built-in support such as Opera and JS calendar widgets for the rest? Also is there a test framework available apart from Selenium?
Originally posted by anne:
This article is an exploration of some HTML5 form features - input, datalist and external data sources - along with some nifty server-side code to help create an intelligent auto-complete form field, a la Google Suggest, in very few lines of code.
( Read the article )
Guys example 2 and 3 http://html5.org/demos/dev.opera.com/article-examples.html
are simply not working in opera 10+.