With the <script>
element in place, the input elements can now retrieve possible completions with an AJAX call. Now, when we enter a few characters in an input field, we are presented with a list of choices, as shown in the image:
Let's look in some detail at how this is implemented in, remarkably, a few lines of JavaScript.
If we look at the code again, we see that we call the
autocomplete()
method on both the #title
and #author
<input>
elements, but each with a different source argument. The autocomplete widget in jQuery UI is very versatile and simple to apply (The code shown is part of booksweb.py
, but we skipped this earlier):
Chapter5/booksweb.py
<script> $("#title" ).autocomplete({ source:'/books/gettitles', minLength:2}).focus(); $("#author").autocomplete({ source:'/books/getauthors', minLength:2}); </script>
The source
attribute of the options object we pass to the...