Question

我正在尝试使用django app中的jquery ui自动填充搜索一些项目。我看过这个question，我就像自动完成文档一样关注。我对插件或其他东西不感兴趣。我明白了。

在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')

在我的模板中，我有类似的东西

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放在文本输入上，而不是标签上。

有什么想法吗？自动完成对象上的“select”事件是否可以覆盖？有什么想法吗？

提前致谢。

Answer 1

来自autocomplete documentation：

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

对于select callback：

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

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

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

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

因此，在item.value事件处理程序返回后，窗口小部件会将文本输入的值设置为select。当然，除非（如上文所述）您的事件处理程序返回false。尝试将select处理程序调整为：

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

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

使用Django进行Jquery自动完成

1 个答案: