@nurzhannogerbek

Как правильно реализовать автозаполнение поля?

Здравствуйте! Помогите пожалуйста разобраться.

Есть форма с двумя полями. Первое поле СhoiseField (user_characteristic), второе поле простое Textarea (description). Я пытаюсь сделать так, чтобы при выборе значения из первого поля, второе поле автозаполнялось. Использую JQuery UI autocomplete. Подскажите как реализовать подобную вещь?

forms.py
RequirementForm(forms.ModelForm):
    class Meta:
        model = Requirement
        fields = ('user_characteristic', 'description',)
        widgets = {
            'user_characteristic': forms.Select(attrs={'class': 'form-control', 'id': 'user-characteristic',}),
        }

    def __init__(self, *args, **kwargs):
        super(RequirementForm, self).__init__(*args, **kwargs)
        self.fields['user_characteristic'] = forms.ChoiceField(
            choices=[(x.user_symbol, x.user_class) for x in UserCharacteristic.objects.all()],
        )
        self.fields['description'].widget = Textarea(attrs={'class': 'form-control', 'id': 'description', 'autocomplete': 'off'})


views.py:
def requirement_autocomplete(request):
    if request.is_ajax():
        word = request.GET.get('term', '')
        user_characteristics = UserCharacteristic.objects.filter(user_class__icontains=word)
        results = []
        for user_characteristic in user_characteristics:
            user_characteristic_json = {
                'id': user_characteristic.id,
                'label': user_characteristic.user_class,
                'value': user_characteristic.user_class,
                'user_characteristic_description': user_characteristic.user_symbol + ' – Варианты использования для роли ' + user_characteristic.user_description
            }
            results.append(user_characteristic_json)
        data = json.dumps(results)
    else:
        data = 'fail'
    mimetype = 'application/json'
    return HttpResponse(data, mimetype)


javascript:
$("#user-characteristic").autocomplete({
   source: "/requirement_autocomplete/",
   minLength: 0,
   select: function( event, ui ){
      $("#user-characteristic").val(ui.item.value);
      $("#description").val(ui.item.user_characteristic_description);
       return false;
    }
});
  • Вопрос задан
  • 429 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы