Check out [ Google Suggest] to see input completion in action. The AutoCompleteField widgets allows you to very easily create a similar effect in TurboGears. See also the [ AutoCompleteField] and the [ AutoCompleteDesc] classes source code. == How to use AutoCompleteField == 1. Create a new probject (`tg-admin quickstart`) and name it autocomplete, or reuse an old one. We will mount the code required for the `AutoCompleteField` one level below your `RootController`. 1. If you created a new project, remove the methods `login` and `logout` from your `` file. We won't use them for this tutorial. 1. Import the AutoCompleteField widget to `` with: {{{ #!python from turbogears.widgets import AutoCompleteField }}} 1. Create a controller-class with an index-method that shows an empty page (for now): {{{ #!python class TestInputCompletion(controllers.Controller): @turbogears.expose(template="autocomplete.templates.complete") def index(self): return dict() }}} 1. Mount an instance of your new controller: {{{ #!python class Root(controllers.RootController): testcompletion = TestInputCompletion() }}} 1. Create the `complete.kid` file necessary to display the empty page by copying `welcome.kid` to `complete.kid` and clearing out everything inside the body. The file should look like this: {{{ #!xml Testing the AutoCompleteField widget! }}} 1. You can check if everything works OK so far by going to `localhost:8080/testcompletion`. You should see a blank page. 1. Add an `__init__` method to `TestInputCompletion` where you instantiate the AutoCompleteField widget: {{{ #!python def __init__(self): self.acfield = AutoCompleteField() }}} 1. Modify complete.kid and add {{{${acfield.display()}}}} inside the `` tag. That code automagically inserts all the HTML and Javascript code necessary to display the AutoCompleteField if we pass it an instance. It should look something like: {{{ #!xml Testing the AutoCompleteField widget! ${acfield.display() }}} 1. Then change the `index` method so that the template gets passed our widget: {{{ #!python @turbogears.expose(template="autocomplete.templates.complete") def index(self): return dict(acfield = self.acfield) }}} 1. You should now be able to see a lonely input-box if you go to http://localhost:8080/testcompletion. However, it doesn't complete any input yet. 1. The next step is to give the AutoCompleteField some data with which it can complete input. In a real program the data probably comes from a database, but here we just add the strings to the TestInputCompletion class that we wan't completed: {{{ #!python class TestInputCompletion(controllers.Controller): countries = ["Abkhazia", "Afghanistan", "Akrotiri", "Ă…land", "Albania", "Algeria", "American Samoa", "Andorra", "Angola", "Anguilla", "Antigua and Barbuda", "Argentina", "Armenia", "Aruba", "Ascension Island", "Austria", "Azerbaijan"] }}} 1. Add a `search` method to TestInputCompletion: {{{ #!python @turbogears.expose(format = "json") def search(self, input): input = input.lower() matches = [country for country in self.countries \ if country.lower().startswith(input)] return dict(matches = matches) }}} This method takes as it's input a search string and returns a page in JSON format with all the countries it thinks matches the search string. You can test it out by going to: http://localhost:8080/testcompletion/search?input=a. 1. Change how the AutoCompleteField is constructed so that it can interact witht the search method: {{{ #!python def __init__(self): self.acfield = AutoCompleteField(search_controller = "search", search_param = "input", result_name = "matches") }}} That's it! You should now have an awesome AutoCompleteField that completes on countrynames. If not, state your problem here and the tutorial will be updated. == Possible additions == * It would be cool if the AutoCompleteField updated a FastDataGrid in realtime. Only those rows that matches the input in the AutoCompleteField should be shown. * Instead of hardcoding which strings that should be completed, the strings should come from a database.