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がそれに当たります。
見た目を変えたい場合は
を修正すると良いでしょう。
(私もimgをとっぱらっています)
comboboxは既にDataProviderへの属性を設定できるので
を設定しています。
入力された文字は"searchString"に入ってくるのでそれをパラメータとして渡します。
View側ロジック
ロジックは以下
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のオプションはもう少しあるんですけどドキュメントがないので辛いッス。
うくく。