如何将JQuery UI自动完成小部件连接到Django Dajax？_Django_Jquery Ui_Autocomplete_Dajaxice_Dajax

如何将JQuery UI自动完成小部件连接到Django Dajax？

django jquery-ui autocomplete

如何将JQuery UI自动完成小部件连接到Django Dajax？,django,jquery-ui,autocomplete,dajaxice,dajax,Django,Jquery Ui,Autocomplete,Dajaxice,Dajax,我有一个Django应用程序，我正试图为它构建一个自动完成的UI来进行选择。当用户在文本框和应用程序中键入内容时，应用程序应根据从数据库检索到的值提出搜索建议。我想使用Dajax/Dajaxice来处理用于ui模板的ajax和jqueryui自动完成小部件。有人能解释一下如何让jqueryui自动完成小部件通过autocompletesource属性（或其他更好的方式）调用我的dajax函数吗我的代码是这个和这个的组合 my_app/ajax.py： from my_app.models im

我有一个Django应用程序，我正试图为它构建一个自动完成的UI来进行选择。当用户在文本框和应用程序中键入内容时，应用程序应根据从数据库检索到的值提出搜索建议。我想使用Dajax/Dajaxice来处理用于ui模板的ajax和jqueryui自动完成小部件。有人能解释一下如何让jqueryui自动完成小部件通过autocomplete

source

属性（或其他更好的方式）调用我的dajax函数吗

我的代码是这个和这个的组合

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>


....
....
$（函数（）{
$（“#id_符号”）。自动完成({
来源：“Dajaxice.ui.auto_filter_symbols（Dajax.process，'symbol'：$（'id_symbol'）。serialize（true）}；”，
minLength:1//我们甚至要搜索一个字符
});
});
....
....
符号：
....

如果您注意到上面的内容，我正在使用jquery-1.7.2和jquery-ui-1.10.4。这是因为声明它与jquery-1.7.2兼容。不确定是否可以使用较新的jquery版本

我不知道如何让模板的javascript调用我的dajax函数。jQueryUI说要使用它的

source

属性，但没有给出一个很好的例子。有人能告诉我上面的说法是否正确吗

一旦dajax view函数从数据库检索到建议，我如何用它填充

.autocomplete

文本框

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

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

简介:

使用单独的javascript（JQuery）setter函数初始化jQueryUI.autocomplete的源选项

通过第三个javascript函数使用Dajaxice命令将.autocomplete小部件的源选项连接到服务器端函数

说明：

首先，重要的是要记住，Dajaxice提供了ajax通信通道，客户端javascript和服务器端代码通过该通道进行交易，而Dajax提供了生成javascript（JSON）的便捷方式无需编写任何javascript即可在客户端浏览器中执行所需功能的代码

由于jqueryui为我们提供了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>

就是这样！关键是首先初始化.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()})" />

参考资料

JQuery UI API文档：：
其他线索如下：

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