Jquery自动完成Django [英] Jquery Autocomplete with Django

问题描述

我正在django应用程序中搜索一些jquery ui autocomple的项目。我查看了这个问题，我正在关注自动完成文档。我对插件或其他东西不感兴趣我得到了这个。

I'm trying to make a search of some items with a jquery ui autocomple in a django app. I have looked at this question, and I'm following just like autocomplete doc. I'm not interested in plugins or something else. I got this.

在views.py：

def search_view(request):
    q = request.GET['term']
    ret = []
    listado = Model.objects.filter(descripcion__istartswith=q).order_by("descripcion")
    for l in listado:
        ret.append({'label':l.descripcion, 'value':l.id})
    return HttpResponse(simplejson.dumps(ret), mimetype='application/json')

在我的模板中，我有这样的东西

In my template, I have something like this

js：

$("#auto_material").autocomplete({
                source:'{% url search_view %}',
                minLength: 2,
                select: function( event, ui ) {
                    $("#auto_material").val(ui.item.label);
                    $("#id_material").val(ui.item.value);
                }

            });

html：

<input type="text" id="auto_material" name="material" class="campo" style="width:99%;"/>
<input type="hidden" id="id_material" />

搜索项目中的所有内容都可以正常工作，但是当我尝试设置文本输入值使用ui.item.label它会将ui.item.value放在文本输入上，而不是标签。

Everything in the search of items works fine, but when I'm trying to set the text input value with the ui.item.label it keeps putting the ui.item.value on the text input, not the label.

任何想法？自动完成对象上的选择事件是否可以覆盖？任何想法？

Any idea? Is the "select" event on the autocomplete object overridable? Any idea?

提前感谢

推荐答案

a href =http://api.jqueryui.com/autocomplete/#option-source =nofollow>自动完成文档：

From the autocomplete documentation:

标签属性显示在建议菜单中。当用户选择一个项目时，该值将被插入到输入元素中。

The label property is displayed in the suggestion menu. The value will be inserted into the input element when a user selects an item.

而对于 选择回调：

从菜单中选择项目时触发。默认的操作是用所选项目的值替换文本字段的值。

Triggered when an item is selected from the menu. The default action is to replace the text field's value with the value of the selected item.

取消[sic]此事件会阻止该值更新，但是不阻止菜单关闭。

强调我的（拼写错误他们的）。在jQuery-UI自动完成源代码中，我们发现：

Emphasis mine (spelling mistake theirs). In the jQuery-UI autocomplete source code, we find this:

if ( false !== self._trigger( "select", event, { item: item } ) ) {
    self.element.val( item.value );
}

所以该小部件将文本输入的值设置为在选择事件处理程序返回后，item.value 。除非当然（如上述文档中所指出的），您的事件处理程序将返回 false 。尝试调整您的选择处理程序如下：

So the widget will set the text input's value to item.value after your select event handler returns. Unless of course (as noted in the documentation above) your event handler returns false. Try adjusting your select handler to be like this:

select: function( event, ui ) {
    $("#auto_material").val(ui.item.label);
    $("#id_material").val(ui.item.value);
    return false;  // <--------------------- Add this
}

这是记录的行为，所以应该是安全的。

This is documented behavior so it should be safe.

这篇关于Jquery自动完成Django的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！