HTML5 Google Suggest

Introduction

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

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

Combo boxes (input list)

Let's first take a look at how HTML5 works with combo boxes.
<input list="languages" name="language">
<datalist id="languages">
<option value="Norwegian"></option>
<option value="Dutch"></option>
<option value="English"></option>
</datalist>

In older browsers, this markup is degraded into a simple text input field. In the 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 the browser. If you need exactly this, but you also want to see in the old browsers the usual drop-down list (select) with options, you can use this markup (context added for example):
<label>
Enter your front-end specialty:
<input list="languages" name="language">
</label>
<datalist id="languages">
<label>
or select one from the list:
<select name="language">
<option value="">(none)</option>
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
</select>
</label>
</datalist>

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 the option elements to populate 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 the hints can be taken from an external XML file. It should be given with the application / xml media type and look something like this:
<select xmlns="http://www.w3.org/1999/xhtml">
<option value="1"/>
<option value="2"/>
<option value="..."/>
</select>

The contents of this select element will replace the contents of any datalist element referencing the file, except for the case when the select type attribute has the value incremental - then its contents will not replace the existing options, but complement them. You can include an external foo file like this:
<input list="languages" name="language">
<datalist id="languages" data="foo"></datalist>

(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 looked at the combo boxes and the way to fill them using an external file. All that is now left to us to emulate Google Suggest in HTML5 is to wait for events in the combo box, and contact the small server script to dynamically create a file that will be the data source for the datalist element. To do this using conventional 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 with these menu data — a lot of work, agree.

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

<input list = "suggest" name = "q"
oninput = "list.data = '? w =' + encodeURIComponent (value)">
<datalist id = "suggest"> </ datalist>

It is easy to see that the input event handler changes the 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 is left to do to load data from the correct address is to change the data attribute. The new address is the string? W plus the string entered by the user, which we encode for use in the URI using the global function encodeURIComponent. So, if the user enters foo, the request will be sent to the address? 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 the XML file containing these options to fill in the combo box. All this happens dynamically, so as soon as you change the search text in the text field, the server script will process the new data and send the new XML file, changing the contents of the datalist element.

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

Files for this example:

• a list of hints 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 a user in a text file, and then returns XML with 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
<!doctype html>
<html>
<head><title>Demo</title></head>
<body>
<p>
<label>
Please enter a word:
<input list="suggest" name="q"
oninput="list.data = '?w=' + encodeURIComponent(value)">
</label>
<datalist id="suggest"></datalist>
</p>
</body>
</html>"""

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('<select xmlns="http://www.w3.org/1999/xhtml">')
sys.stdout.write(' <option>[searching for "%s"]</option>' % qs[2:])
for name in open('suggest.txt').readlines():
if name.lower().find(qs[2:].lower())!=-1:
sys.stdout.write('<option>%s</option>' % name)
sys.stdout.write('</select>')


Summary

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