AutoCompleteField を使用する

Ajaxのフィールドのひとつで、
ユーザからの入力をキックとして、
随時サーバに問い合わせをして
結果をフィールド内に返すことのできるのが
AutoCompleteFieldです。

非常に簡便に使えるのですが、最初に使う場合、ちょっとピンとこないので、メモ。

普通に使う

PCクラスは以下のような感じ。細かい部分は、省略。

class PC(SQLObject):
    pcid = UnicodeCol(unique=True,notNone=True)
    name = UnicodeCol()

このPCクラス内のpcid属性に対して検索をし、候補を列挙するようにしています。
実際には、PCについてはサブコントローラクラスに任せているのですが、説明のためにRootに配置しています。

class FormSearchPCByID(TableForm):
    pcid = AutoCompleteField(name="pcid",
                             label=u"PC-ID",
                             search_controller = "search_pc_pcid",
                             search_param = "input",
                             result_name = "matches",
                             take_focus=True)

form_search_pc_by_id = FormSearchPCById()

class Root(controllers.RootController):
    @expose(template=".templates.pc_search_pc_by_id")
    def show_form_search_pc_by_id(self):
        return dict(form=form_search_pc_by_id,
                    action="./search_pc_by_id",
                    submit_text="検索")
    
    @expose(format="json")
    def search_pc_pcid(self, input):
        pcs = PC.select(PC.q.pcid.startswith(input))
        
        return dict(matches=[pc.pcid for pc in pcs])

ちなみに、.templates.pc_search_pc_by_id はこんな感じ。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:py="http://purl.org/kid/ns#"
    py:extends="'master.kid'">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" py:replace="''"/>
<title>PC検索</title>
</head>
<body>
    <h2>PC-IDで検索</h2>
    <div py:replace="form.display(action=action, submit_text=submit_text)"></div>
</body>
</html>

Form内で使う

AutoCompleteFieldを使用した場合、通常のFieldとは違う形でメソッドに渡ってきます。
それぞれのAutoCompleteFieldな引数に対して、dictが渡されます。

たとえば、結果を以下のメソッドで受け取る場合。

    def search_pc_by_id(self, pcid):
        print pcid

pcidは以下のようになります。
{'text':ユーザの入力, 'hidden':補完結果}