Django订单追踪应用：如何将用户选择下拉菜单改为搜索栏？

Absolutely! Swapping out that clunky dropdown for a searchable user selector is the perfect fix for large user lists—it’ll make the UI cleaner and way more efficient. Let’s walk through how to implement this using your existing Django code as a starting point:

Step 1: Use Django Autocomplete Light (Recommended) #

This is the most seamless way to add searchable fields in Django, with minimal custom code. Here’s how:

Install & Set Up the Package #

First, install the lightweight, widely-used package:

pip install django-autocomplete-light

Add it to your INSTALLED_APPS in settings.py (make sure it comes before django.contrib.admin):

INSTALLED_APPS = [
    'dal',
    'dal_select2',
    # ... your other existing apps (like django.contrib.admin)
]

Create an Autocomplete View #

Add this to your views.py to handle the search queries:

from dal import autocomplete
from .models import MyUser

class UserAutocomplete(autocomplete.Select2QuerySetView):
    def get_queryset(self):
        # Restrict results to authenticated users (adjust permissions as needed)
        if not self.request.user.is_authenticated:
            return MyUser.objects.none()

        # Start with all users
        qs = MyUser.objects.all()

        # Filter users based on search input (matches name or ID)
        if self.q:
            qs = qs.filter(
                first_name__icontains=self.q
            ) | qs.filter(
                second_name__icontains=self.q
            ) | qs.filter(
                id__icontains=self.q
            )

        return qs

Add the Autocomplete URL #

Update your urls.py to map the autocomplete view:

from .views import CreateOrder, UserAutocomplete

urlpatterns = [
    # ... your existing URLs
    path('create-order/', CreateOrder.as_view(), name='create-order'),
    path('user-autocomplete/', UserAutocomplete.as_view(), name='user-autocomplete'),
]

Modify Your Form #

Create or update your OrderForm in forms.py to use the searchable widget:

from django import forms
from dal import autocomplete
from .models import Objednavka, MyUser

class OrderForm(forms.ModelForm):
    user = forms.ModelChoiceField(
        queryset=MyUser.objects.all(),
        # Link to our autocomplete view
        widget=autocomplete.ModelSelect2(url='user-autocomplete')
    )

    class Meta:
        model = Objednavka
        fields = ['user', 'order']

Update the Template #

Add this line to your url.html template (usually in the <head> section) to load the necessary CSS/JS for the search widget:

{{ form.media }}

That’s it! The user field will now be a searchable input that filters results in real-time as you type, matching first name, last name, or user ID.

Alternative: Vanilla JavaScript (No External Packages) #

If you’d rather avoid adding new packages, here’s a simple DIY approach:

Modify the Form #

Update OrderForm to include a search input and hide the default dropdown:

from django import forms
from .models import Objednavka, MyUser

class OrderForm(forms.ModelForm):
    user_search = forms.CharField(required=False, label='Search User')
    
    class Meta:
        model = Objednavka
        fields = ['user', 'order']
        widgets = {
            'user': forms.Select(attrs={'id': 'user-select', 'style': 'display: none;'}),
        }

Add Search Logic to the Template #

Replace the default user field in your url.html template with this code:

<div class="user-search-container">
    <label for="user-search">Search User:</label>
    <input type="text" id="user-search" name="user_search" placeholder="Type name or ID...">
    
    <select id="user-select" name="user">
        {% for user in form.user.field.queryset %}
            <option value="{{ user.id }}">
                {{ user.first_name }} {{ user.second_name }} (ID: {{ user.id }})
            </option>
        {% endfor %}
    </select>
</div>

<script>
const searchInput = document.getElementById('user-search');
const userSelect = document.getElementById('user-select');
const options = Array.from(userSelect.options);

searchInput.addEventListener('input', (e) => {
    const query = e.target.value.toLowerCase();
    options.forEach(option => {
        const optionText = option.text.toLowerCase();
        option.style.display = optionText.includes(query) ? 'block' : 'none';
    });
});
</script>

This adds a search box that filters the hidden dropdown options in real-time. You can add custom CSS to style it to match your app’s design.

Quick Notes #

• For the autocomplete approach, adjust the UserAutocomplete view to add permission checks if needed (e.g., only show users in a specific team).
• If you have thousands of users, add database indexes to first_name, second_name, and id in your MyUser model to speed up search queries:

  class MyUser(models.Model):
      id = models.CharField(max_length=7, db_index=True)
      first_name= models.CharField(max_length=50, db_index=True)
      second_name = models.CharField(max_length=50, db_index=True)
  

内容的提问来源于stack exchange，提问作者pipikej