HTML5 Google Suggest

Original author: Anne van Kesteren
  • Transfer

Introduction


HTML5 is the next big alteration of HTML (and XHTML), and is being developed jointly by the WHATWG and W3C HTML WG groups (work is not completed yet, but in this article we will call it just HTML5). I already described the beginnings of HTML forms and possible improvements using HTML5 in my previous article , so now I’ll look at some more complex aspects of HTML5 input fields and conclude with an example that demonstrates the simplicity of creating an autocomplete input field with a short server script and a few lines of markup.

The tools discussed in this article are part of the Web Forms 2 specification , which will be integrated into the HTML5 draft . (You need to use the latest version of Opera,preferably 9.5 to see examples in action. Unfortunately, at the forefront of technology, we need to make reservations about the browser.)

Combo boxes (input list)


Let's first look at how HTML5 works with combo boxes. In older browsers, this markup degrades into a simple text input field. In new agents that support HTML5, you can choose one of the predefined values ​​(in addition to the ability to enter arbitrary text). This functionality is very similar, for example, to that offered by email clients or the address bar of a browser. If you need exactly this, but you also want to see the usual drop-down list (select) with options in old browsers, you can use this markup (context added to the example):













Browsers that support the list attribute and the HTML5 datalist element will not display the datalist element with all its contents. Instead, they will use the contents of option elements to fill the combo box. Older browsers will display the contents of the datalist element and allow the user to use either a text field or a drop-down list.

External source for datalist


Another interesting feature is that tooltips can be taken from an external XML file. It should be given with the application / xml media type and look something like this: The contents of this select element will replace the contents of any datalist element that refers to the file, unless the select attribute has a value of incremental - then its contents will not replace the existing options , and complement them. You can attach an external foo file like this: (By the way, the select element in HTML5 also has a data attribute.) Archive of the entire source code of the article . Working code example .










Dynamic combo box


We examined combo boxes and a way to fill them using an external file. All that we now have left before emulating Google Suggest in HTML5 is to wait for the events in the combo box and use a small server-side script to dynamically create a file that will be the data source for the datalist element. To do this with the usual methods, you would need to create your own “drop-down menu” with a list of options, use XMLHttpRequest to get external data, write code that fills the menu with these data - a lot of work, agree.

So what event can we use? Web Forms 2 introduces a new input event, which is already supported by several browsers, including Opera. The event is fired after the user enters text from the keyboard. If it quickly prints a lot of characters, only one event is fired. Connecting the handler to the combo box slightly complicates the code:

oninput = "list.data = '? w =' + encodeURIComponent (value)">


It is easy to see that the input event handler modifies list.data. The list attribute of the input field refers to the datalist element by id, so the data is taken from this datalist. All that remains for us to do to download data from the desired address is to change the data attribute. Is the new address the string? W plus the string entered by the user, which we encode for use in the URI using the encodeURIComponent global function. So, if the user enters foo, the request will be sent to? W = foo (this URI works relative to the page on which the script is running). The server script will receive this URI, find a text file with possible options for the entered string, and then return an XML file containing these options to fill in the combo box. All this happens dynamically,

I made a working example of this so that you can try it yourself: upload files , or check the finished example in action .

Files for this example:
  • a list of tips separated by line breaks in the suggest.txt file - it will be read by the server script in search of suitable options;
  • Python script article-example-suggest.py, which looks for a string entered by the user in a text file, and then returns XML with the search results; this file also describes the input and datalist elements that we discussed above.

The full python code looks like this:
import os
qs = os.environ["QUERY_STRING"]

# The page as shown by default
main="""Content-Type:texthtml;charset=UTF-8\n


Demo






"""

if qs=="":
print main
else:
# If a query string was provided we need to provide an XML file with
# options filtered using the user input
import sys
print "Content-type: application/xml"
print "Cache-control: no-cache"
print ""
sys.stdout.write('')

Summary


Hope you enjoyed these examples! (Many thanks to Johannes Hoff (Core developer in Opera) for creating this Python script after I hinted in a presentation that using HTML5 emulating Google Suggest is just a few lines, which turned out to be true both on the server side and on the side client.) This is not yet ready for serious use, but it makes it possible to feel what we get with HTML5.

Also popular now: