0

我有一个 Django 应用程序，我正在尝试为其构建一个自动完成 UI 以进行选择。当用户在文本框中键入内容时，应用程序应根据从数据库中检索到的值提出搜索建议。我想使用 Dajax/Dajaxice 来处理 UI 模板的 ajax 和 jquery-ui 自动完成小部件。有人可以解释一下如何让 jquery-ui 自动完成小部件通过自动完成source属性（或任何其他更好的方式）调用我的 dajax 函数吗？

我的代码是这个dajax 示例和这个jquery-ui 自动完成示例的组合。

我的应用程序/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 视图函数从数据库中检索到建议，我如何.autocomplete用它填充文本框？

在过去的几天里，我做了很多研究，但很少有 Django-Dajax-JQueryUI 应用程序的例子。

4

1 回答 1

0

经过大量研究并将各种线索拼凑在一起，我终于找到了让 JQuery-UI 自动完成小部件与 Dajax/Dajaxice 和 Django 一起工作的关键。

概要：

  1. 使用单独的 javascript (JQuery) setter 函数初始化 JQuery-UI .autocomplete 的源选项
  2. 通过第三个 javascript 函数使用 Dajaxice 命令将 .autocomplete 小部件的源选项连接到服务器端函数。

解释：

首先，重要的是要记住，Dajaxice 提供了 ajax 通信通道，通过该通道您的客户端 javascript 和服务器端代码进行交易，而 Dajax 提供了一种生成 javascript (JSON) 代码的便捷方式，该代码将在客户端浏览器，无需编写任何 javascript。

由于 JQuery-UI 为我们提供了 javascript 小部件（以 jquery 的形式）来执行我们想要的功能（.autocomplete），因此我们不需要 Dajax 并且根据我的发现，它不会在这个应用程序中取得任何成功。我们只需要 Dajaxice 来将客户端 javascript ( .autocomplete ) 连接到我们的服务器端函数，该函数执行搜索并返回结果以向用户建议。

下面是我已经开始工作的修改后的代码。请注意，到目前为止，我只在开发平台上对其进行了测试。

删除了无关代码的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>

我的应用程序/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 回答