Question

我有一个简单的模型

class Thing(models.Model):

    name = models.CharField(max_length=40)
    language = models.CharField(max_length=2, default='de')
    date_from = models.DateField(default=timezone.now)

在使用现有行中的现有名称键入时，应在表单中预先填充name字段。我看了一下django-select2或django-autocomplete-light。但这两个包主要用于ForeignKeys。事实上，我在我的项目中也这样做。

有没有人知道如何解决这个任务的简单方法，而不是在JavaScript中乱用很多。

Answer 1

不使用JavaScript路线，我会使用数据列表。

<label for="name-id">Name: </label>
    
<input list="names" name="name" id="name-id" />
    
<datalist id="names">
    <option value="Vione">
    <option value="Veya">
    <option value="Argo">
    <option value="Paro">
    <option value="Esena">
    <option value="Sanar">
</datalist>

这可以在Django中实现如下：

# Your view

class ThingCreateView(CreateView):
    model = Thing
    success_url = reverse('thing-list')

    def get_form(self, form_class=None):
        form = super().get_form(form_class)

        # make the 'name' field use a datalist to autocomplete
        form.fields['name'].widget.attrs.update({'list': 'names'})

        return form

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)

        # add `names` to the context to populate the datalist
        context['names'] = Thing.objects.values_list('name', flat=True)

        return context

# Your form
<form method="post">
    {% csrf_token %}

    {{ form.as_p }}

    <datalist id="names">
        {% for name in names %}
        <option value="{{ name }}">
        {% endfor %}
    </datalist>

    <input type="submit" value="Save" />
</form>

Answer 2

我现在正在使用来自https://github.com/running-coder/jquery-typeahead的精彩jquery typeahead插件。我的事物模型表格是

class ThingShareCreateForm(forms.ModelForm):

    helper = FormHelper()
    helper.layout = Layout(
        Div(
            Div('mode', css_class='col-md-2'),
            Div(Div(Field(Div(PrependedText('name', '<span class="fa fa-search"></span>'),
                            css_class='typeahead__query'),
                        css_class='typeahead__field'),
                    css_class='typeahead__container'),
                css_class='col-md-5'),

...

后来在Meta课程中

class Meta:

    model = ThingShare
    fields = ['mode', 'name', 'source', 'source_text', 'date_from', 'date_to']

    widgets = {
        'name': forms.TextInput(attrs={'class': 'js-typeahead-name',
                                       'name' : 'q',
                                       'type' : 'search',
                                       'autocomplete': 'off',
                                       }),

然后可以使用它：

typeof $.typeahead === 'function' && $.typeahead({
        input: ".js-typeahead-name",
        minLength: 1,
        hint: false,
        source: {
            country: {
                data: data.countries
            },
        },
        callback: {
            onClickAfter: function (node, a, item, event) {
                event.preventDefault();

如伟大的文档和示例中所述。这个库值得仔细研究。我仍然需要实现我的AJAX调用，这基本上是我的模型“Thing”上的select distinct。现在很简单

此致

迈克尔

Django文本输入typeahead自动完成

2 个答案: