how to set tabindex for django autocomplete?

Question

in my forms I have some fields (name, places and job). Places is a foreign key. so i used autocomplete for that field.

if I press tab after entering name the cursor moves to the autocomplete. after choosing the place when I press the tab key it moves to the search bar in the theme. i guess its because of the tab-index of autocomplete is -1.

Then for the second thoughts, if that's the reason the cursor wouldn't have moved to the autocomplete, right?

any way I gave that search input tabindex = -2 . this time the cursor moved to the logo which is a link to the homepage then to the next a tag. After some more tabs I finally reached to the beginning of the form.

how can I solve this problem

Answer 1

You have two options

1. Override the widget and provide an attribute dictionary in the django forms.

name = forms.TextInput(attrs={'tabindex': 1})

A detailed instruction of setting custom attributes in django is available in the django documentaion. http://docs.djangoproject.com/en/dev/ref/forms/widgets/#django.forms.Widget.attrs

2.Define a custom template filter that adds a tabindex attribute

@register.filter
def tabindex(value, index):
    value.field.widget.attrs['tabindex'] = index
    return value

Then, add tabindex to the fields in the template. For example:

{{ form.first_name|tabindex:1 }}
{{ form.email|tabindex:3 }}