Warning: Can't synchronize with repository "(default)" (Unsupported version control system "svn": No module named svn). Look in the Trac log for more information.

Changes between Version 7 and Version 8 of AutoCompleteField


Ignore:
Timestamp:
06/24/07 17:38:43 (12 years ago)
Author:
Chris Arndt
Comment:

migration notice

Legend:

Unmodified
Added
Removed
Modified
  • AutoCompleteField

    v7 v8  
    1 Check out [http://www.google.com/webhp?complete=1&hl=en 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 [http://trac.turbogears.org/turbogears/browser/trunk/turbogears/widgets/big_widgets.py#L83 AutoCompleteField] and the [http://trac.turbogears.org/turbogears/browser/trunk/turbogears/widgets/big_widgets.py#L83 AutoCompleteDesc] classes source code. 
    2  
    3 == How to use AutoCompleteField ==  
    4  
    5  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`. 
    6  1. If you created a new project, remove the methods `login` and `logout` from your `controllers.py` file. We won't use them for this tutorial. 
    7  1. Import the AutoCompleteField widget to `controllers.py` with:  
    81{{{ 
    9 #!python 
    10 from turbogears.widgets import AutoCompleteField 
     2#!rst 
     3.. note:: This page has been migrated to http://docs.turbogears.org/1.0/AutoCompleteField. 
    114}}} 
    12  1. Create a controller-class with an index-method that shows an empty page (for now): 
    13 {{{ 
    14 #!python 
    15 class TestInputCompletion(controllers.Controller): 
    16     @turbogears.expose(template="autocomplete.templates.complete") 
    17     def index(self): 
    18         return dict() 
    19 }}} 
    20  1. Mount an instance of your new controller: 
    21 {{{ 
    22 #!python 
    23 class Root(controllers.RootController): 
    24     testcompletion = TestInputCompletion() 
    25 }}} 
    26  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: 
    27 {{{ 
    28 #!xml 
    29 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    30 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:py="http://purl.org/kid/ns#" 
    31     py:extends="'master.kid'"> 
    32  
    33 <head> 
    34     <meta content="text/html; charset=UTF-8" http-equiv="content-type" py:replace="''"/> 
    35     <title>Testing the AutoCompleteField widget!</title> 
    36 </head> 
    37  
    38 <body> 
    39 </body> 
    40 </html> 
    41 }}} 
    42  1. You can check if everything works OK so far by going to `localhost:8080/testcompletion`. You should see a blank page. 
    43  1. Add an `__init__` method to `TestInputCompletion` where you instantiate the AutoCompleteField widget: 
    44 {{{ 
    45 #!python 
    46 def __init__(self): 
    47     self.acfield = AutoCompleteField()  
    48 }}} 
    49  1. Modify complete.kid and add {{{${acfield.display()}}}} inside the `<body>` 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:  
    50 {{{ 
    51 #!xml 
    52 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    53 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:py="http://purl.org/kid/ns#" 
    54     py:extends="'master.kid'"> 
    55  
    56 <head> 
    57     <meta content="text/html; charset=UTF-8" http-equiv="content-type" py:replace="''"/> 
    58     <title>Testing the AutoCompleteField widget!</title> 
    59 </head> 
    60  
    61 <body> 
    62     ${acfield.display()} 
    63 </body> 
    64 </html> 
    65 }}} 
    66  1. Then change the `index` method so that the template gets passed our widget: 
    67 {{{ 
    68 #!python 
    69 @turbogears.expose(template="autocomplete.templates.complete") 
    70 def index(self): 
    71     return dict(acfield = self.acfield) 
    72 }}} 
    73  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. 
    74  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: 
    75 {{{ 
    76 #!python 
    77 class TestInputCompletion(controllers.Controller): 
    78     countries = ["Abkhazia", "Afghanistan", "Akrotiri", "Åland", "Albania", "Algeria", 
    79                  "American Samoa", "Andorra", "Angola", "Anguilla", "Antigua and Barbuda", 
    80                  "Argentina", "Armenia", "Aruba", "Ascension Island", "Austria", "Azerbaijan"] 
    81 }}} 
    82  1. Add a `search` method to TestInputCompletion: 
    83 {{{ 
    84 #!python 
    85 @turbogears.expose(format = "json") 
    86 def search(self, input): 
    87     input = input.lower() 
    88     matches = [country for country in self.countries \ 
    89                if country.lower().startswith(input)] 
    90     return dict(matches = matches) 
    91 }}} 
    92  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. 
    93  1. Change how the AutoCompleteField is constructed so that it can interact witht the search method: 
    94 {{{ 
    95 #!python 
    96 def __init__(self): 
    97     self.acfield = AutoCompleteField(search_controller = "search", 
    98                                      search_param = "input", 
    99                                      result_name = "matches") 
    100 }}} 
    101   
    102 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. 
    103  
    104 == Possible additions == 
    105  * 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. 
    106  * Instead of hardcoding which strings that should be completed, the strings should come from a database. 
    107