0

選択を行うためのオートコンプリート UI を構築しようとしている Django アプリがあります。ユーザーがテキスト ボックスに入力すると、アプリはデータベースから取得した値に基づいて検索候補を表示する必要があります。Dajax/Dajaxice を使用して ajax と UI テンプレートの jquery-ui オートコンプリート ウィジェットを処理したいと考えています。sourcejquery-ui オートコンプリート ウィジェットがオートコンプリート属性 (または他のより良い方法)を介して私の dajax 関数を呼び出す方法を説明してもらえますか?

私のコードは、このdajax の例とこのjquery-ui autocomplete の例を組み合わせたものです。

my_app/ajax.py:

from my_app.models import MyModel
from dajax.core import Dajax
from dajaxice.decorators import dajaxice_register
from django.utils import simplejson

@dajaxice_register
def auto_filter_selections(request, symbol):
    dajax = Dajax()
    result = MyModel.objects.filter(symbol__startswith = symbol)
    dajax.assign('#id_symbol', 'innerHTML', str(result))
    return dajax.json()

テンプレート: my_app_ui.html

<head>
....
<script type="text/javascript" src="{{STATIC_URL}}jquery/jquery-1.7.2.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}dajax/jquery.dajax.core.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/jquery/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.js"></script>
....
<script>
  $(function() {
    $("#id_symbol").autocomplete({
      source: "Dajaxice.ui.auto_filter_symbols(Dajax.process,'symbol':$('#id_symbol').serialize(true)});",
      minLength: 1 //We want to search for even one character
    });
  });
</script>
....
</head>

<body>
....
<div class="ui-widget">
  <label for="id_symbol">Symbol: </label>
  <input id="id_symbol">
</div>
....
</body>

上記に気付いた場合、私は jquery-1.7.2 と jquery-ui-1.10.4 を使用しています。これは、dajax のドキュメントに jquery-1.7.2 と互換性があると記載されているためです。新しいjqueryバージョンを使用できるかどうかわかりません。

テンプレートの JavaScript を取得して dajax 関数を呼び出す方法がわかりません。.autocompleteの jquery-uiドキュメントには、そのsource属性を使用するように記載されていますが、あまり良い例はありません。上記が正しいかどうか誰か教えてもらえますか？

dajax ビュー関数が DB から提案を取得したら、.autocompleteそれをテキスト ボックスに入力するにはどうすればよいですか?

ここ数日、かなりの調査を行ってきましたが、Django-Dajax-JQueryUI アプリケーションの例はほとんどありません。

4

1 に答える 1

0

かなり多くの調査を行い、さまざまな手がかりをつなぎ合わせた結果、JQuery-UI オートコンプリート ウィジェットを Dajax/Dajaxice および Django と連携させるための鍵をついに見つけました。

あらすじ:

  1. JQuery-UI .autocomplete のsourceオプションを別の javascript (JQuery) セッター関数で初期化する
  2. 3 番目の JavaScript 関数を介して Dajaxice コマンドを使用して、 .autocomplete ウィジェットのソースオプションをサーバー側関数に接続します。

説明：

まず、Dajaxice は、クライアント側の JavaScript とサーバー側のコードが処理する ajax 通信チャネルを提供するのに対し、Dajax は、必要な機能を実行する JavaScript (JSON) コードを生成する便利な方法を提供することを覚えておくことが重要です。 JavaScript を記述する必要のないクライアント ブラウザ。

JQuery-UI は、目的の機能 ( .autocomplete ) を実行するための JavaScript ウィジェット (jquery の形式) を提供するため、Dajax は必要なく、私の調査結果によると、このアプリケーションでは成功しません。クライアント側の JavaScript ( .autocomplete ) を、検索を実行してユーザーに提案する結果を返すサーバー側の関数に接続するには、Dajaxice のみが必要です。

以下は、私が修正したコードです。これまでのところ、開発プラットフォームでのみテストしたことに注意してください。

不要なコードが削除されたmy_autocomplete_search_template.html :

<head>
....
<script type="text/javascript" src="{{STATIC_URL}}jquery/jquery-1.7.2.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}dajax/jquery.dajax.core.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/jquery/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.js"></script>
....
<script>
    //Initialize the source option of .autocomplete widget during page load
    //See: http://api.jqueryui.com/autocomplete/#method-option setter example code
    var local_source = ["Abc",]  //Dummy string for initialization only; temporary value
    $("#search_box").autocomplete("option", "source", local_source)
</script>
<script>
    //.autocomplete widget is Dajaxice callback function
    // *data* comes from server-side function
    function search_result(data) {
        $("#search_box").autocomplete({
            source: data,
        });
    }
</script>
<script>
    //This function called by user <input> tag and calls the server-side function via Dajaxice command
    function dajax_filter_search_term() {
        Dajaxice.my_app.auto_filter_search_term(search_result,'search_term':$('#search_box').val()});
        //                  |                     |                  |      ----------------------
        //                  |                     |                  |                |
        //             server-side          .autcomplete      serverside          user-typed
        //              function           callback func.    func. argument      value to search
    }
</script>
....
</head>

<body>
....
<div class="ui-widget">
    <label for="search_box">Search Term: </label>
    <input type="text" name="search" id="search_box" onkeyup="dajax_filter_search_term()" />
</div>
....
</body>

my_app/ajax.py

from dajaxice.decorators import dajaxice_register
from django.utils import simplejson
from my_app.models import MyModel

@dajaxice_register
def auto_filter_search_term(request, search_term):
    # Query DB for suggestions to present to user
    q = MyModel.objects.filter(myfield__istartswith=search_term)
    data = []
    for item in q:
        # Format returned queryset data, if needed
        data_item = item.field1 + ', ' + item.field2 + ', ' + item.field3
        data.append(data_item)

    # Return data to callback function *search_result*
    return simplejson.dumps(data)

それだ！重要なのは、最初に .autocomplete ソース オプションを初期化し、Dajaxice のみを使用してサーバー側関数と通信することです。

次のように、JavaScript 関数dajax_filter_search_term()を取り除き、#search_box入力タグにDajaxice呼び出しを含めることで、クライアント側のコードをさらに最適化することができます。

<input type="text" name="search" id="search_box" onkeyup="Dajaxice.ui.auto_filter_search_term(search_result, {'search_term':$('#search_box').val()})" />

参考文献

于 2014-02-06T20:40:06.770 に答える