Django-selectable and autocomplete: Autocomplete does not work. Should I add my own JS?

Question

I'm trying to use Django selectable on django.auth User. It returs JSON with users on selectable/organiser_app-userlookup/, but no autocomplete appears in input.

I've registered selectable in INSTALLED_APPS:

    INSTALLED_APPS = (
    ...
    'selectable',
    )

Also added to url.py in base project urls:

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

My lookup.py is:

     #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)

and lookup form:

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

My template has just input from form and it's rendered as:

<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>

When I look at url selectable/organiser_app-userlookup/ I get JSON with users, so it seems like Django-selectble works. How should I use autocomplete now? Should I add some JQuery source to my template? I just don't understand.

Answer 1

OK, the problem was there was no js script that handles all autocomplete events.

Just need to pass JS to the template template. Specify somewhere in code:

{{ form.media.js }}

It will render to:

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

This helped for me.

I just don't know why there is nothing about this mentioned in the docs.