Django 可选择和自动完成：自动完成不起作用。我应该添加自己的 JS 吗？答案

【问题标题】：Django-selectable and autocomplete: Autocomplete does not work. Should I add my own JS?Django 可选择和自动完成：自动完成不起作用。我应该添加自己的 JS 吗？
【发布时间】：2016-01-19 17:38:48
【问题描述】：

我正在尝试在 django.auth 用户上使用可选择的 Django。它返回 JSON 与 selectable/organiser_app-userlookup/ 上的用户，但输入中没有自动完成。

我在INSTALLED_APPS注册了selectable：

    INSTALLED_APPS = (
    ...
    'selectable',
    )

还添加到基础项目网址中的url.py：

    url(r'^selectable/', include('selectable.urls')),

我的lookup.py 是：

     #UserLookup
class UserLookup(ModelLookup):
    model = User
    search_fields = ('first_name__icontains', 'last_name_icontains', 'email_icontains')

def get_item_value(self, item):
    # Display for currently selected item
    return item.username

def get_item_label(self, item):
    # Display for choice listings
    return u"%s (%s)" % (item.username, item.get_full_name())

registry.register(UserLookup)

和查找表格：

    class UserLookupForm(forms.Form):
user_input = forms.CharField(
    label='Type user name, last name or email',
    widget=selectable.AutoCompleteWidget(lookup_class=UserLookup),
    required=False,
)

我的模板刚刚从表单输入，它呈现为：

<form>
<div class="form-group">
    <label class="col-sm-3 control-label" for="id_user_input">
    Type user name, last name or email</label>
<div class="col-sm-6 coll-sm-offset-3">
    <input class="form-control" 
    data-selectable-allow-new="false" 
    data-selectable-type="text" 
    data-selectable-url="/selectable/organiser_app-userlookup/"   
    id="id_user_input" 
    name="user_input" 
    placeholder="Type user name, last name or email" title="" 
    type="text" />
</div></div>
<p class="btn btn-default" role="button" 
id="button_add">
<span class="glyphicon glyphicon-plus-sign"></span>
</p>
</form>

当我查看 url selectable/organiser_app-userlookup/ 时，我得到了用户的 JSON，所以 Django-selectble 似乎有效。我现在应该如何使用自动完成功能？我应该在我的模板中添加一些 JQuery 源吗？我只是不明白。

【问题讨论】：

标签： jquery python django autocomplete django-select-related

【解决方案1】：

好的，问题是没有处理所有自动完成事件的 js 脚本。

只需要将 JS 传递给模板模板即可。在代码中的某处指定：

{{ form.media.js }}

它将渲染到：

<script type="text/javascript" src="/static/selectable/js/jquery.dj.selectable.js?v=0.9.0"></script>

这对我有帮助。

我只是不知道为什么文档中没有提到这一点。

【讨论】：