Django+Dojoでautocompleteを実現してみる

Django+Dojoでautocompleteを実現してみる。
コード量でいくならば最短ではないかな？？

HTML、Javascript

まず土台のhtml

autocomplete.html

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>sample</title>
<script type="text/javascript" src="/static/js/dojo.js"></script>
<script type="text/javascript" src="/static/js/django_ajax.js"></script>

<script type="text/javascript">
  dojo.require("dojo.widget.ComboBox");
</script>
</head>
<body>

<input dojoType="combobox" name="combo" value=""
  dataUrl="/autocomplete/?search=%{searchString}" mode="remote"
  style="width: 200px;" />

</body>
</html>

autocompleteを実現するためにdojoのwidgetを使います。
dojoだとcomboboxがそれに当たります。
見た目を変えたい場合は

src\widget\templates\HtmlComboBox.css
src\widget\templates\HtmlComboBox.html

を修正すると良いでしょう。
（私もimgをとっぱらっています）

comboboxは既にDataProviderへの属性を設定できるので

dataUrl(ajaxで取得しにいくURL）
mode（localだと自データ、remoteだとajaxで取りにいきます）

を設定しています。
入力された文字は"searchString"に入ってくるのでそれをパラメータとして渡します。

Ｖｉｅｗ側ロジック

ロジックは以下

url.py

    (r'^autocompletedemo/$', 'demo.ajax.views.autocompletedemo'),
    (r'^autocomplete/$', 'demo.ajax.views.autocomplete'),

ロジックは

view.py

def autocompletedemo( request ):
    t = loader.get_template( 'ajax/autocomplete' )
    c = RequestContext( request, 
    {
    }, None )
    response = HttpResponse( t.render( c ) )
    return response

def autocomplete( request ):
    search = request.GET['search']
    
    list = Product.objects.filter( title__startswith=search )
    list = [[x.title, x.id]for x in list]
    json = simplejson.dumps( list )
    
    response = HttpResponse( json )
    return response

データはjson形式で返さないといけないのでsimplejsonを使用します。
とりあえず前方一致なのでstartswithを使用してます。
とりあえずこんだけで実現できます。
多分コード量最短。
dojoのwidgetのオプションはもう少しあるんですけどドキュメントがないので辛いッス。

うくく。

Doge log

Abby CTO 雑賀力王のオフィシャルサイトです