DAL v3: select form field is populated with "--------"

Hello, I am trying to implement a simple autocomplete with a select form field using the User object model. My select field is empty apart from the dashes and I can’t enter anything in it. I fail to link/associate my UsernameForm to the login.html correctly. It should at least populate the select form field. I could really use some pointers to move forward. Thank you for your time!

This is what I have so far:

the localhost/type_ahead/?q

{"pagination": {"more": false}, "results": [{"text": "testuser1", "id": 1}, {"text": "testuser2", "id": 2}]}

urls.py

from dal import autocomplete
urlpatterns = [
    url(
        r'^type_ahead/$',
        TypeAheadUsers.as_view(),
        name='list_users',
    ),
]

views.py

from dal import autocomplete
class TypeAheadUsers(autocomplete.Select2QuerySetView):
    def get_queryset(self):
        qs = User.objects.filter(is_active=True).order_by("id")
        if self.q:            
            qs = qs.filter(username__istartswith=self.q)
        return qs

models.py

from dal import autocomplete
class UsernameForm(ModelForm):
    username = forms.ModelChoiceField(
        queryset=User.objects.filter(is_active=True).order_by("id"),
        widget=autocomplete.ModelSelect2(url='list_users'),
    )    
    class Meta:
        model = User
        fields = ('username',)

views.py

a login method that passes a context dictionary c to the login.html file

def login(request,invalid_login=None, username=None):
    c = {}
    c.update(csrf(request))

    if(invalid_login):
        c.update({"invalid_login":True})
    else:
        c.update({"invalid_login":False})

    c.update({"username": username if username else None})

    try:
        tmp = UsernameForm()
        logger.debug("show username field: {0}".format(tmp))
        c.update({"ta_username": tmp})
    except Exception as e:
        logException(e)
    return render(request, 'login.html', c)

login.html

{% extends "base.html" %}

{% block content %}
<div class="login_main">
  {% load staticfiles %}
  <div class="login_productname2">Super Awesome Product Name Here</div>
  <div id="login_sec" class="login_numpad">

    <form action="/account/auth/" method="post" id="pinForm">
      {% csrf_token %}
      <table class="LoginAccount"> 
        <tr>          
          <td>Username:<span id="userRefresh" class="Refresh" onclick="refreshLoginUserList()"></span></td>
        </tr>
        <tr>
          <td>
            {{ta_username.username}}
          </td>
        </tr>
        <tr>
          <td><label for="passwd">PIN:</label></td>
        </tr>
        <tr>
          <td><input type="password" class="selected" maxLength="4" name="passwd" value="" id="passwd">{% if invalid_login %}<span class="ErrorMsg">Incorrect password</span>{% endif %}</td>
        </tr>
        <tr>
          <td height="1pt" colspan="1">&nbsp;</td>
        </tr>
      </table>
      {% include "NumberPad.html" %}      
    </form>
    <script type="text/javascript" src="{% static 'scripts/jquery.js' %}"></script>
    <div class="login_productname3">Rev. {{ epcRev }}</div>
  </div>
</div>

{% endblock content %}

the rendered select form field

<select data-autocomplete-light-function="select2" data-autocomplete-light-url="/type_ahead/" id="id_username" name="username">
    <option value="" selected="selected">---------</option>
</select>

[jpic]

Perhaps this will help, it helped a lot of SO users: blog.yourlabs.org/post/30382323418/surviving-djangocontribstaticfiles-or-how-to

[thainlnguyen]

obviously, i am not very good at following instructions. i don’t know why i miss the {{form.media}} field, but after putting it in everything is fine. there were some js errors but that was because i didn’t copy the static files to my project tree.

it works and thank you!